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 配置如下
,//"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。
詳情看這篇文章
這篇文章會介紹為什麼不直接引入babel/polyfill.
第二種辦法用@babel/plugin-transform-object-assign外掛程式.
配置完成後,執行demo並且報錯
uncaught typeerror: cannot assign to read only property 'exports' of object '#'
網上解決方法如下:
點開錯誤的檔案，標註錯誤的地方是這樣的一段**：
import from './timeformat';
module.exports=;
就是module.exports;
原因是：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 型別需要統一成一種,加這行**後就搞定,還是可以隨意用,並轉義成功.
webpack關聯babel手記
babel是為了把高階js語法轉為低版本語法，它跟webpack是兩個互不相關的工具，要想將它們關聯起來，需要借助到 1 babel core babel的核心模組 2 babel loader 把 babel 和 webpack 進行關聯的橋梁 3 babel preset env 預設 安裝完之...
webpack配合babel使用
babel 是乙個 j ascript 編譯器，可以把es6的語法轉為相容瀏覽器的es5語法 babel中文官網 babel可以單獨使用，但是一般都是和webpack結合一起使用 1 babel loader babel core babel preset env 換語法 安裝依賴 已經在專案裡安裝...
webpack中的babel配置
webpage只能處理一部分es6的新語法，更高階的語法不能處理，需要借助第三方loader將高階語法轉換為低階語法 大部分時候用不上，但是如果需要在比較低階的瀏覽器執行時，就需要使用 1.安裝babel相關的包 第一套包 cnpm install babel core babel loader 7...