共计 2590 个字符，预计需要花费 7 分钟才能阅读完成。
早些时候 CRA(create-react-app) 升级到 2.0.3 的时候, react-app-rewired 没有跟着升级, 导致项目无法启动, 于是乎直接 eject 开始改造项目.
查看版本
> create-react-app –version
2.0.3
创建项目
create-react-app my-project
cd my-project
yarn eject # 输入 y
目前为止项目目录结构, 忽略 node_modules 这个黑洞
├── README.md
├── config
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── webpack.config.js
│ └── webpackDevServer.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock
安装依赖
yarn add antd
yarn add babel-plugin-import less less-loader @babel/plugin-proposal-decorators -D
CRA eject 之后 package.json 里面没有区分 devDependencies 和 dependencies, 但是不影响使用
因为 antd 是使用的 less, CRA 默认不支持, 所以需要改下默认的 webpack 配置, config/webpack.config.js
首先修改 babel 配置
个人习惯使用 babelrc, 所以把 babel-loader options 中 babelrc 的值改为 true, 增加.babelrc 文件
{
“presets”: [
“react-app”
],
“plugins”: [
[
“import”,
{
“libraryName”: “antd”,
“libraryDirectory”: “lib”,
“style”: true
},
“ant”
],
[
“@babel/plugin-proposal-decorators”, // 启用装饰器
{
“legacy”: true
}
]
]
}
参照默认的 sass 配置, 增加 less 配置
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在 module>rules 中添加规则
// sass rule
//…
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap
},
‘less-loader’,
{
javascriptEnabled: true
}
),
sideEffects: true
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
‘less-loader’,
{
javascriptEnabled: true
}
)
}
// file loader
至此基本项目虽然已经基本完成, 但是如果你是使用 less 版本比较高, 项目是无法运行的参考 issue 需要改造 getStyleLoaders 函数, 增加第三个参数 otherConfig, 就是上面代码中的 javascriptEnabled: true
const getStyleLoaders = (cssOptions, preProcessor, otherConfig) => {
const loaders = [
isEnvDevelopment && require.resolve(‘style-loader’),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: ‘../../’} : undefined)
},
{
loader: require.resolve(‘css-loader’),
options: cssOptions
},
{
loader: require.resolve(‘postcss-loader’),
options: {
ident: ‘postcss’,
plugins: () => [
require(‘postcss-flexbugs-fixes’),
require(‘postcss-preset-env’)({
autoprefixer: {
flexbox: ‘no-2009’
},
stage: 3
})
],
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
].filter(Boolean);
if (preProcessor) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
…otherConfig
}
});
}
return loaders;
};
这样修改之后, 自定义主题 modifyVars 也可以写在 otherConfig 中, 一举两得, 不多赘述.
至此项目????
