最近在学习scratch-gui的源码，并对它进行魔改。但是UI部分写css真的是很让我头皮发麻，所以考虑引入antd。引入antd不难，难得是webpack配置。因为scratch用的是 css module，而antd遵循 es module，antd的样式会污染全局样式，必须单独处理。参考了这篇文章。
1安装antd
$ npm install antd --save
2 配置webpack.config.js
- 首先在原来开启css module 的配置项中，排除antd
test: /\.css$/,
exclude: [/[\\/]node_modules[\\/].*antd/], // 排除antd
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64:5]',
camelCase: true
}
}
- 为antd新增一个配置项，注意这里不采用css module
{ // 因为antd 基于 es module自身 css 是全局的，为了避免污染全局 css，这里单独配置
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
},
3.配置antd按需加载
官方文档中有两种方式
- 使用 babel-plugin-import（推荐）
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
- 手动引入
import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style'; // 加载 LESS
我们这里方然采用推荐方式，不然太麻烦了吧
在 babel-loader 配置项里，添加按需加载
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, 'src'), /node_modules[\\/]scratch-[^\\/]+[\\/]src/],
options: {
// Explicitly disable babelrc so we don't catch various config
// in much lower dependencies.
babelrc: false,
plugins: [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-proposal-object-rest-spread',
['react-intl', {
messagesDir: './translations/messages/'
}],
['import', {
libraryName: 'antd',
style: 'css' // `style: true` 会加载 less 文件
}]
],
presets: [
['@babel/preset-env', {targets: {browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']}}],
'@babel/preset-react'
]
}
},
我参考的文章，到这里意思就配置完成了，但是我添加按需加载后，编译就失败了。原来还要引入 babel-plugin-import，也就是通过它来达到按需加载的，我以为项目已经有了，就忽视了，引入就OK了
$ npm install babel-plugin-import --save
现在让我们愉快的在scratch-gui中使用antd吧。溜了
