webpack4 es6转换

匿名 (未验证) 提交于 2019-12-02 23:43:01

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

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

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

require("@babel/polyfill"); 或者用module.exports = { entry: ["@babel/polyfill", "./app/js"], };

生产环境下的打包

在docs选项里 transform-runtime插件按照要求一步一步做,最后把corejs的属性改成2,然后下载个corejs就可以了. 下图是把配置放到了配置项里,当然放到.bebalrc文件也可以
 1 {   2             test: /\.js$/,   3             exclude: /node_modules/,  4             loader: "babel-loader"   5             // options:{  6             //     // "presets": [  7             //     //     [  8             //     //         "@babel/preset-env",{  9             //     //             "useBuiltIns": "usage", 10 11             //     //             "targets": { 12             //     //                 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 13             //     //               }, 14             //     //         } 15             //     //     ] 16             //     //   ] 17  18                  19             //         "plugins": [["@babel/plugin-transform-runtime", { 20             //             "corejs": 2, 21             //             "helpers": true, 22             //             "regenerator": true, 23             //             "useESModules": false 24             //           }]] 25  26                    27             // } 28           29         },

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!