用create-react-app
生成項目後,默認是不支持@修飾器的,
如果我們需要使用@修飾器,比如使用mobx時,應該如何配置呢?
網上看了很多資料,基本都是關於 babel6 及以下版本的方案,
所以寫了這篇文章,專門說說 babel7+ 版本如何配置
1.暴露配置文件
使用create-react-app
生成項目後,
執行yarn eject
,將 webpack 配置文件暴露出來。
2.修改配置文件
修改/config/webpack.config.dev.js
和/config/webpack.config.prod.js
文件,
兩個文件的修改內容相同,都是添加兩行代碼,如下
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// ... 省略其他代碼
plugins: [
// !!要添加以下兩行代碼:
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
// ... 省略其他代碼
],
// ... 省略其他代碼
},
// ... 省略其他代碼
}
注意插件排序:@babel/plugin-proposal-decorators
應該是插件列表中的第一個插件
3.安裝依賴包:npm install --save-dev @babel/plugin-proposal-decorators babel-plugin-transform-decorators-legacy
4.萬事大吉
是不是很簡單,此時執行npm start
,項目就跑起來了,快試試吧