Babel编译后仍然出现es6语法解决思路

发表于 更新于 分类于 阅读次数：

最近在实施vue-cli工程迁移webpack5的时候，遇到了经过babel转译仍然出现es6语法的情况。

经过排查分析，相当一部分新依赖库使用了es module进行导出，而webpack的js loader一般的如下配置教程是将node_modules下面所有依赖都不进行编译

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  ...
}

此种用法大部分情况都是正确的，但是遇到上述情况的时候，就需要正确配置，以下分别描述不同工作环境的配置方法。

Vue-cli配置

Vue-cli的配置文件为vue.config.js，在文件内有配置已经暴露出属性transpileDependencies。如果需要针对某一个package进行强制转译，可以使用语法。

vue.config.js文件必要部分

1
2
3
4
5
module.exports = {
  ...
  transpileDependencies: [/[/\\]node_modules[/\\]pdfjs-dist[/\\]/],
  ...
}

Webpack配置

webpack的配置文件中，需要在对应的module的loader配置处，对相应的配置进行exclude，可以通过正则或者判断函数的方式进行筛选。

webpack.config.js文件必要部分

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules\/(?!(swiper|dom7|ssr-window)\/).*/,
        use: ['babel-loader']
      }
    ]
  },
  ...
}

或者如下使用函数方式进行判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: filepath => {
          if (/pdfjs-dist/.test(filepath)) {
            return false
          }
          return /node_modules/.test(filepath)
        },
        use: ['babel-loader']
      }
    ]
  },
  ...
}

常见需要强制转译的依赖

一般我们在使用的时候有如下一些依赖需要强制转译：

依赖名称 描述
swiper 一个热门的轮播插件，在7以上版本以esm导出，需要转译
dom7 一个迷你操作dom的依赖，被swiper引用
ssr-window 一个在SSR环境处理window和document的依赖，被swiper引用
pdfjs-dist 一个流行的pdf阅读插件
material-ui 一个流行的UI库