【Webpack】正確引入bebel
最近開發前端到一半，把之前寫好的js module準備拿來套用的時候
發現在console上竟然跳出一堆錯誤
Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck'
不外乎大部分都是上面的錯誤訊息。
一開始還以為是路徑問題，也直接將錯誤訊息去詢問谷哥大神。
大部分的回應都是 babel runtime的問題。
也照著大神們的指示去做，但都沒有任何好轉。
在沒有全盤了解的情況下試了半天，終於找出一個較正規的流程跟配置。
問題終於也找到，是因為bebel文件裡的helper引發。
以下紀錄bebel引入的常規流程：
（一）安裝 bebal
（一）安裝 bebal
只要上述就好，會自動安裝下列四個
(1) @babel/core (核心，必定下載)
(2) @babel/preset-env (官方的傻瓜包，polyfill已經被整合在裡面，不用自己在整合)
(3) babel-loader (webpack導入babel的基本容器，使babel能夠讓webpack使用)
(4) @babel/plugin-syntax-dynamic-import (動態import加載)
(4) @babel/plugin-syntax-dynamic-import (動態import加載)
什麼的babel rutime等等其他的都別理會，那是歷史包袱。
（二）修改webpack.config.js
在rule裡面，添加babel-loader
（三）根目錄配置.babelr
在根目錄下配置.babelr
裡面最重要的是@babel/plugin-syntax-dynamic-import
需要引入它，才可以做動態的import，
另外引發我這次一堆錯誤的
就是helpers這個屬性，需要添加並指定為false
否則import外部js的時候，會瘋狂有helper的錯誤
張貼留言