【Webpack】正確引入bebel

【Webpack】正確引入bebel

   4月 22, 2019       leeson3

---

最近開發前端到一半，把之前寫好的js module準備拿來套用的時候

發現在console上竟然跳出一堆錯誤

Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck'

不外乎大部分都是上面的錯誤訊息。

一開始還以為是路徑問題，也直接將錯誤訊息去詢問谷哥大神。

大部分的回應都是 babel runtime的問題。

也照著大神們的指示去做，但都沒有任何好轉。

在沒有全盤了解的情況下試了半天，終於找出一個較正規的流程跟配置。

問題終於也找到，是因為bebel文件裡的helper引發。

以下紀錄bebel引入的常規流程：


（一）安裝 bebal

$ npm install --save-dev @babel/core @babel/preset-env babel-loader @babel/plugin-syntax-dynamic-import

view raw gistfile1.txt hosted with ❤ by GitHub

只要上述就好，會自動安裝下列四個

(1) @babel/core　 (核心，必定下載)

(2) @babel/preset-env　(官方的傻瓜包，polyfill已經被整合在裡面，不用自己在整合)

(3) babel-loader　(webpack導入babel的基本容器，使babel能夠讓webpack使用)

(4) @babel/plugin-syntax-dynamic-import (動態import加載)

什麼的babel rutime等等其他的都別理會，那是歷史包袱。

（二）修改webpack.config.js

	//babel loader (es6降轉es5)
	{
	test: /\.m?js$/,
	exclude: /(node_modules|bower_components)/,
	use: {
	loader: 'babel-loader',
	options: {
	presets: ['@babel/preset-env']
	}
	}
	}

view raw babel loader hosted with ❤ by GitHub

在rule裡面，添加babel-loader

（三）根目錄配置.babelr

	{
	"presets": [
	[
	"@babel/preset-env",
	{
	"useBuiltIns": "usage",
	"modules": false,
	"targets": {
	"browsers": "last 2 versions, not ie <= 9"
	}
	}
	]
	],
	"plugins": [
	"@babel/plugin-syntax-dynamic-import",
	[
	"@babel/plugin-transform-runtime",
	{
	"helpers": false
	}
	]
	]
	}

view raw gistfile1.txt hosted with ❤ by GitHub

在根目錄下配置.babelr

裡面最重要的是@babel/plugin-syntax-dynamic-import

需要引入它，才可以做動態的import，

另外引發我這次一堆錯誤的

就是helpers這個屬性，需要添加並指定為false

否則import外部js的時候，會瘋狂有helper的錯誤