babel-loader配置

webpack中,一般需要使用babel进行代码转译。首先安装以下babel相关的npm包:

npm i -D babel-loader @babel/core @babel/preset-env

然后在module.rules 里面配置:

{
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        } 
      }

此时,可以进行大部分es6代码转换,比如箭头函数,但async/await依然不能转换。控制台报错如下:

Uncaught ReferenceError: regeneratorRuntime is not defined
    at _hello (hello.js:10:16)
    at hello (hello.js:10:16)
    at Object../src/hello.js (hello.js:15:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/main.js (hello.js:15:6)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1
    at startup:6:1

支持async/await

继续安装以下npm包

npm i -D @babel/runtime
npm i -D @babel/plugin-transform-runtime

继续添加配置:

      {
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              ['@babel/plugin-transform-runtime']
            ]
          }
        } 
      }

ok, async/await就可以转译了

你可能感兴趣的:(babel-loader配置)