webpack4 es6转换

在webpack里用es6语法, ie浏览器不识别,为了让浏览器识别,需要用到bebal转换;

bebal,英文是通天塔的意思, 我们常说的巴比伦也是这个词;我估计是当初设计者是想用它作为一个沟通es6新语法和以前的就的js语法的一个工具,所以用了bebal.

步骤: 1在bebal官网的设置里,点击webpack,就会出现相应的教程:

第一步2install让下载babel-loader @babel/core;第二步3usage让在你的webpack.config.js配置module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }第三步:4生成一个配置文件.babelrc 注意是在根路径,也就是和你要打包的js文件同一级别.并且在里面写上{ "presets": ["@babel/preset-env"] }, 按照它的要求安装@babel/preset-env,并进行设置

2 设置preset-env,按照上面的例子

3按照polyfill,这个转换promise这种关键字的工具. 并将useBuildin属性设为useage;

并在打包的文件开头require("@babel/polyfill"); 或者用module.exports = { entry: ["@babel/polyfill", "./app/js"], };

生产环境下的打包

在docs选项里 transform-runtime插件按照要求一步一步做,最后把corejs的属性改成2,然后下载个corejs就可以了. 
下图是把配置放到了配置项里,当然放到.bebalrc文件也可以

 {

             test: /\.js$/,

             exclude: /node_modules/,

             loader: "babel-loader"

             // options:{

             //     // "presets": [

             //     //     [

             //     //         "@babel/preset-env",{

             //     //             "useBuiltIns": "usage",

             //     //             "targets": {

             //     //                 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

             //     //               },

             //     //         }

             //     //     ]

             //     //   ]

             //         "plugins": [["@babel/plugin-transform-runtime", {

             //             "corejs": 2,

             //             "helpers": true,

             //             "regenerator": true,

             //             "useESModules": false

             //           }]]

             // }

         },

巴特西

webpack4 es6转换

最新文章

热门文章