__webpack_require__("ez/6"); const aaa = 1; function fna () { let dd = 33333 let cc = Object.assign({key:2}) let xx = String.prototype.repeat.call('b', 3) if ("foobar".String.prototype.includes("foo")) { let vv = 1 } return dd } function fna2 () { return fna() + aaa + __WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */] } class Canvas { constructor(height, width) { this.height = height; this.width = width; } } class Canvas2 { constructor(height, width) { this.height = height; this.width = width; } }
minified
主要设置编译后是否是压缩,boolean类型,如果使用babel-cli进行打包编译文件这个配置项能够起到作用,但是目前大部分还是会依赖第三方打包工具,例如webpack,所以这个配置参数一般不用设置,webpack插件中的UglifyJsPlugin做了压缩的工作。
comments
在生成的文件中,不产生注释,boolean类型,webpack插件中的UglifyJsPlugin也同样集成了这个功能。
env
基本配置如下:
{ "env": { // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development "test": { "presets": ["env", "stage-2"], // instanbul是一个用来测试转码后代码的工具 "plugins": ["istanbul"] } } }
再谈兼容性问题
Babel默认只转换新的JavaScript语法,而不转换新的API,比如Iterator、Generator、Set、Maps、Promise等等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码,具体的可以参考babel-plugin-transform-runtime模块的 definitions.js 文件。
这里主要涉及到babel编译后依然会存在浏览器兼容性问题,一般会使用transform-runtime和babel-polyfill配合使用,对于后者只需要在项目入口文件require引入即可。
当然在使用类似Object.assign函数功能时,可以使用lodash库来替代,promise可以使用Q.js替代等等方案,这样依赖可以不需要引入以上插件,具体可以根据项目具体安排
总结
.babelrc配置文件主要还是以presets和plugins组成,通过和webpack配合进行使用,分享下我们在项目中常用的配置。以上都是通过学习总结出来的,有什么不对的地方希望指出。
vue项目开发使用的配置如下:
{ "presets": [ ["env", { "modules": false }], "stage-2" ], // 下面指的是在生成的文件中,不产生注释 "comments": false, "plugins": ["transform-runtime","syntax-dynamic-import"], "env": { // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development "test": { "presets": ["env", "stage-2"], // instanbul是一个用来测试转码后代码的工具 "plugins": ["istanbul"] } } }
react项目开发使用的配置如下:
{ "presets": [ ["env", { "modules": false }], "stage-2", "react" ], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }