前言
在使用qiankun微前端的時候糜值，我們需要構(gòu)建React微應(yīng)用岖常。在官方案例中使用了@rescripts/cli插件振亮，這個插件由于版本不同，坑也是蠻多的许昨。本文簡單總結(jié)了rescripts配置支持裝飾器語法的經(jīng)驗妆艘。
項目目錄
如下：
image.png
用紅框圈起來的就是關(guān)鍵的三個配置文件。
package.json文件
這個文件中主要是一些需要的依賴，主要包括兩部分：
- 一是babel相關(guān)谱轨，版本很重要，6和7的配置是不一樣的吠谢，我這里用的7
"dependencies": {
"@babel/core": "7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"antd": "^3.25.2",
"axios": "^0.25.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
}
- 二是rescripts相關(guān)土童，rescripts這幾個依賴很奇葩，互相有依賴關(guān)系工坊，版本最好不要變
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.16.7",
"@rescripts/cli": "^0.0.14",
"@rescripts/rescript-env": "0.0.10",
"@rescripts/rescript-use-babel-config": "0.0.12",
"@rescripts/rescript-use-eslint-config": "0.0.11",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"react-scripts": "^3.4.1"
}
.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
],
"react-app"
],
"plugins": [
// ["import", {
// "libraryName": "antd",
// "libraryDirectory": "es",
// "style": "css" // `style: true` 會加載 less 文件
// }],
// ↓這里支持裝飾器語法配置
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
.rescriptsrc.js
const { name } = require('./package');
const logConfig = {
webpack: config => {
config.output.library = `${name}-[name]`;
config.output.libraryTarget = 'umd';
config.output.jsonpFunction = `webpackJsonp_${name}`;
config.output.globalObject = 'window';
return config;
},
devServer: _ => {
const config = _;
config.headers = {
'Access-Control-Allow-Origin': '*',
};
config.historyApiFallback = true;
config.hot = false;
config.watchContentBase = false;
config.liveReload = false;
return config;
},
};
logConfig.isMiddleware = true
module.exports = [
// 這樣才能使.babelrc文件生效
['use-babel-config', '.babelrc'],
logConfig,
]
后記
這就是本次踩坑后的總結(jié)献汗，更多內(nèi)容參考rescripts (worldlink.com.cn)
