babel不生效

在适配低端机时，在 webpack 中使用了 babel，结果生成的 js 代码中依然有()=>和const写法，一看就是 babel 不生效，报错如下：

Uncaught SyntaxError: Unexpected token =>

babel 配置如下：

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false
      }
    ]
  ],
  "sourceType": "unambiguous"
}

搜了下文档是忘记指定 browser 版本了，在项目的package.json文件中添加配置：

"browserslist": [
    "> 2%",
    "last 2 versions",
    "not ie <= 8"
]

再次编译又提示报错：

Uncaught SyntaxError: Use of const in strict mode.

看了下 js 代码发现还是有const写法，发现是入口文件忘记塞入 babel 列表，修正后编译运行正常。

附：

webpack.config.js#module#rules:
{
    test: /\.(js|jsx|mjs)$/,
    include: allowBabelFiles,
    resolve: {
        fullySpecified: false,
    },
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
    },
},

其中，allowBabelFiles是允许 babel 编译的文件。

// 允许babel转换的目录和package
const allowBabelFiles = [
  resolve('node_modules/@pawgame'),
  resolve('node_modules/@shm-open'),
  resolve('node_modules/proxy-polyfill'),
  resolve('node_modules/pako'),
  resolve('bin/ext/fairygui.js'),
  resolve('tsc_outputs/src'),
];

multi packages 补充

如果是 multi packages 项目，会发现 babel 不起作用，原因是如果是 Mono 仓库，.babelrc配置将不生效，推荐使用babel.config.json。

参考：

multi packages 补充​

multi packages 补充