webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行。
一、安装
npm install --save-dev babel-loader babel-core
babel-preset-env
二、在webpack.config.js中配置module
module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader' } ] }
三、新建.babelrc配置文件
如下是vue-cli自动生成的babel配置。如果要配置plugins,需要npm install对应插件和依赖。
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
四、polyfill:完整模拟ES2015+
Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。如果想让这些方法运行,就需要使用babel-polyfill,为当前环境提供一个垫片。
npm install --save babel-polyfill
// 方法一:在webpack中引用 module.exports = { entry: ["babel-polyfill", "./app/js"] }; // 方法二:在js入口顶部引入 import "babel-polyfill";