博客 / 詳情

返回

create-react-app腳手架搭建後如何使項目支持修飾器語法

create-react-app搭建react項目後,是不支持修飾器語法的。react-scripts庫已經提供了打包cli命令以及常規的構建配置,如果需要使用一些使用時特性,比如修飾器等,需要另外注入

正好,官網提供react-app-rewired庫,可能幫助我們注入自定義構建配置

首先,安裝react-app-rewired

yarn add react-app-rewired -S

將react-scripts全部替換成react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
 },

然後在工程的根目錄下新建config-overrides.js配置文本,加上修飾器配置腳本代碼:

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
    config = injectBabelPlugin([
        "@babel/plugin-proposal-decorators", { "legacy": true }
    ], config)
    return config;
}

執行npm run start後提示我們使用customize-cra自定義配置
image.png

進去customize-cra官網瞭解一下如何使用

image.png
照着上面配置就可以讓項目支持修飾器語法了

const { 
    override,
    addDecoratorsLegacy, 
} = require('customize-cra');

module.exports = override(
    addDecoratorsLegacy()
)
user avatar ailim 頭像 juanerma 頭像
2 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.