webpack4.0 babel配置遇到的问题

babel配置

babel版本升级到8.x之后发现出现了很多问题.

首先需要安装

"@babel/core": "^7.1.2",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime": "^7.1.2",
"babel-loader": "^8.0.4"

因为babel8.x插件依赖这些插件.

因为我的项目需要兼容IE8 所以我的babel-loader 配置如下

{
      test: /\.js$/,
      include: dirVars.srcRootDir,
      loader: 'babel-loader',
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              "targets": {
                "browsers": ["ie >= 8"]
              },
              //"useBuiltIns": 'usage',
              "modules": "commonjs"
            }
          ]
        ],
        cacheDirectory: true,
        plugins: [
          '@babel/plugin-transform-runtime', "@babel/plugin-transform-object-assign"
        ]
      }
    }

打包之后发现我的项目出错了,因为项目里有个js用了Object.assign()方法 所有报这个方法的错误.

以前webpack3 配置babel plugins: ['transform-runtime'],当时babel版本6.x直接就会转义这个方法.所以不会报错.

现在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']无效报错.

后来google后查找,发现了2种好的解决办法

第一种办法先安装"@babel/polyfill": "^7.0.0",

babel-loader 加配置"useBuiltIns": 'usage'

"useBuiltIns": 'usage' 的意思是对应的环境自动替换为所需的 polyfill。

详情看这篇文章https://juejin.im/entry/596309365188252ec3400aaf

这篇文章会介绍为什么不直接引入babel/polyfill.

第二种办法用@babel/plugin-transform-object-assign插件.

配置完成后,运行demo并且报错

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

网上解决方法如下:

点开错误的文件，标注错误的地方是这样的一段代码：

import {normalTime} from './timeFormat';

module.exports={

　　normalTime

};

就是module.exports;

百度查不到，google一查果然有。

原因是：The code above is ok. You can mix require and export. You can‘t mix import and module.exports.

翻译过来就是说，代码没毛病，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。

因为webpack 中不允许混用import和module.exports,

解决办法就是统一改成ES6的方式编写即可.

我的解决办法:

babel-loder配置加一行代码"modules": "commonjs"

这是因为这个配置环境下module 类型需要统一成一种,加这行代码后就搞定,还是可以随意用,并转义成功.