一:bable
1、Babel 是一个 JavaScript 编译器;
2、Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
3、 Babel的作用:
①、语法转换
②、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
③、源码转换 (codemods)
Babel配置思路:
在webpack中,默认只能处理 一部分ES6的新语法,一些更高级的ES6或者ES7 语法,webpack是处理不了的;这时候,就需要借助于第三方的 loader ,来帮助webpack 处理这些高级的语法;当第三方loader 把高级语法转为低级语法之后,会把结果交给 webpack 去打包到bundle.js中;
在webpack 中,可以运行如下两套命令,安装两套包,去安装babel 相关的loader功能:
npm包:
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
// 或者
1. 安装 npm install --save-dev babel-preset-es2015
2. 安装 npm install --save-dev babel-preset-stage-3
3. 在项目根目录创建一个.babelrc文件 里面内容 最基本配置是:
2、打开 webpack 的配置文件,在module节点下的rules 数组中,添加一个新的匹配规则:
①、{ test :/\.js$/, use :'babel-loader', exclude:/node_modules/ }
②、注意:在配置babel 的loader 规则的时候,必须把node_modules目录,通过 exclude选项排除掉:原因有俩:
I、如果不排除 node_modules ,则babel 会把 node_modules 中所有的第三方JS文件,都打包编译,这样,会非常消耗CPU,同时,打包速度非常慢;
II、哪怕,最终,babel 把所有的node_modules 中的JS 转换完毕了,但是,项目也无法正常运行。
3、在项目的 根目录中,新建一个叫做:.babelrc的Babel 配置文件,这个配置文件,属于JSON 格式,所以,在写.babelrc 配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号;
①、在.babelrc 写下的配置:大家可以把 preset 翻译成 【语法】 的意思:
{
"presets": [" env","stage-0"],
"plugins": ["transform-runtime"]
}
4、目前,我们安装的 babel-preset-env
是比较新的es语法,之前,我们安装的是babel-preset-es2015
,现在,出了一个更新的语法插件,叫做 babel-preset-env
,它包含了所有的 和es **相关的语法。
旧版配置
- 安装
npm install --save-dev babel-preset-es2015
- 安装
npm install --save-dev babel-preset-stage-3
- 在项目根目录创建一个.babelrc文件 里面内容 最基本配置是:
{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
摘自:
https://www.cnblogs.com/zhangshaoliang/p/8529582.html
https://www.cnblogs.com/21-forever/p/11128435.html