babel配置
babel版本升級(jí)到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"

因?yàn)閎abel8.x插件依賴這些插件.
因?yàn)槲业捻?xiàng)目需要兼容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)我的項(xiàng)目出錯(cuò)了,因?yàn)轫?xiàng)目里有個(gè)js用了Object.assign()方法 所有報(bào)這個(gè)方法的錯(cuò)誤.
以前webpack3 配置babel plugins: ['transform-runtime'],當(dāng)時(shí)babel版本6.x直接就會(huì)轉(zhuǎn)義這個(gè)方法.所以不會(huì)報(bào)錯(cuò).
現(xiàn)在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']無效報(bào)錯(cuò).
后來google后查找,發(fā)現(xiàn)了2種好的解決辦法
第一種辦法先安裝"@babel/polyfill": "^7.0.0",
babel-loader 加配置"useBuiltIns": 'usage'
"useBuiltIns": 'usage' 的意思是對(duì)應(yīng)的環(huán)境自動(dòng)替換為所需的 polyfill。
詳情看這篇文章https://juejin.im/entry/596309365188252ec3400aaf
這篇文章會(huì)介紹為什么不直接引入babel/polyfill.
第二種辦法用@babel/plugin-transform-object-assign插件.
配置完成后,運(yùn)行demo并且報(bào)錯(cuò)
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
網(wǎng)上解決方法如下:
點(diǎn)開錯(cuò)誤的文件，標(biāo)注錯(cuò)誤的地方是這樣的一段代碼：
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打包的時(shí)候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因?yàn)閣ebpack 中不允許混用import和module.exports,
解決辦法就是統(tǒng)一改成ES6的方式編寫即可.
我的解決辦法:
babel-loder配置加一行代碼"modules": "commonjs"
這是因?yàn)檫@個(gè)配置環(huán)境下module 類型需要統(tǒng)一成一種,加這行代碼后就搞定,還是可以隨意用,并轉(zhuǎn)義成功.

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

總結(jié)

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

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