脚本宝典收集整理的这篇文章主要介绍了

webpack – babel配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

webpack - babel配置

babel是一个javascript编译器,是前端开发中的一个利器。它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法。

通过构建和babel,可以使用最新js语法进行开发,最后自动编译成用于浏览器或node环境的代码。

webpack中使用babel

配合webpack使用babel前,需要首先使用npm init初始化一个项目,npm install -g webpack安装webpack(全局安装是为了在命令行使用webpack命令)。

  • 安装babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中,babel-preset-env插件是为了告诉babel只编译批准的内容,相当于babel-preset-es2015, es2016, es2017及最新版本。通过它可以使用最新的js语法。

  • 配置webpack.config.js

在webpack配置文件中配置bable-loader

module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }
    ]
}

其中,exclude是定义不希望babel处理的文件。targets是presets的一些预设选项,这里表示将js用于浏览器,只确保占比大于1%的浏览器的特性,主流浏览器的最新两个主版本。
更多与配置有关的信息,可以参考:
babel env preset设置,
browserlist预设置.

  • 在命令行中运行相应webpack命令即可。
  • 由于babel-preset配置选项较多,我们一般可以在根目录下建立.babelrc文件,专门用来放置babel preset配置,这是一个json文件。可以将上述配置修改如下:
//.bablerc文件
{
    "presets": [
        ['env',{
            "targets": {
                "browsers": ['> 1%', 'last 2 versions']
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}

babel-polifill插件

在上面的babel配置中,babel只是将一些es6,es7-8的语法转换成符合目标的js代码,但是如果我们使用一些特性或方法,比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就需要babel-polifill。

简单的说,polifill就是一个垫片,提供了一些低版本es标准对高级特性的实现。使用polifill的方法如下:

npm install --save babel-polifill

然后在应用入口引入polifill,要确保它在任何其他代码/依赖声明前被调用。

//CommonJS module
require('babel-polyfill');

//es module
import 'babel-polifill';

在webpack.config.js中,将babel-polifill加入entry数组中:

entry: ["babel-polifill", "./app.js"]

相比于runtime-transform,polifill用于应用开发中。会添加相应变量到全局,所以会污染全局变量。

更多细节参考babel-polifill

runtime-transform插件

runtime transform也是一个插件,它与polifill有些类似,但它不污染全局变量,所以经常用于框架开发。

安装:
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法:
将下面内容添加到.bablerc文件中

{
    "plugins": ["transform-runtime"]
}

更多细节参考bable-runtime-transform插件

总结

以上是脚本宝典为你收集整理的

webpack – babel配置

全部内容,希望文章能够帮你解决

webpack – babel配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过