babel配置
babel版本升級到8.x之后發(fā)現(xiàn)出現(xiàn)了很多問題.
首先需要安裝

"@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"]}}

打包之后發(fā)現(xiàn)我的項目出錯了,因為項目里有個js用了Object.assign()方法 所有報這個方法的錯誤.
以前webpack3 配置babel plugins: ['transform-runtime'],當(dāng)時babel版本6.x直接就會轉(zhuǎn)義這個方法.所以不會報錯.
現(xiàn)在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']無效報錯.
后來google后查找,發(fā)現(xiàn)了2種好的解決辦法
第一種辦法先安裝"@babel/polyfill": "^7.0.0",
babel-loader 加配置"useBuiltIns": 'usage'
"useBuiltIns": 'usage' 的意思是對應(yīng)的環(huán)境自動替換為所需的 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>'
網(wǎng)上解決方法如下:
點開錯誤的文件，標(biāo)注錯誤的地方是這樣的一段代碼：
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,
解決辦法就是統(tǒng)一改成ES6的方式編寫即可.
我的解決辦法:
babel-loder配置加一行代碼"modules": "commonjs"
這是因為這個配置環(huán)境下module 類型需要統(tǒng)一成一種,加這行代碼后就搞定,還是可以隨意用,并轉(zhuǎn)義成功.

轉(zhuǎn)載于:https://www.cnblogs.com/chengfeng6/p/9813024.html

總結(jié)

以上是生活随笔為你收集整理的webpack4.0 babel配置遇到的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。