在dva框架和create-react-app建立出來的框架中修飾器語法與按需加載引入antd分別配置

按需加載須要的包  babel-plugin-import    裝飾器語法須要的包  @babel/plugin-proposal-decorators

　　dva框架

將.webpackrc  改爲.webpackrc.js而後具體配置

const config = {};
config.proxy = {
  "/api": {
    "target": "http://localhost:7001",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

config.extraBabelPlugins = [
  //antd按需加載引入
  ["import", {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": "css"
  }],
  //裝飾器語法配置
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]



export default config;

 

　　在 creat-react-app建立的腳手架配置

建個.babelrc

 1 {
 2     "presets": [
 3         "react-app"
 4     ],
 5     "plugins": [
 6         [
 7             "import",
 8             {
 9                 "libraryName": "antd",
10                 "libraryDirectory": "es",
11                 "style": "css" // `style: true` 會加載 less 文件
12             }
13         ],
14         [
15             "@babel/plugin-proposal-decorators",
16             {
17                 "legacy": true
18             }
19         ]
20     ]
21 }

 

 

裝飾器 語法使用以前  拿antd的包爲例子

// const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);

// export default WrappedNormalLoginForm;        拋出的是這個改變後的變量  而不是Login這個組件了

 

使用後

 

@Form.create({ name: 'normal_login' })     注意這裏不要加分號  放在class上面

 

export default Login