scratch3.0之引入antd

最近在学习scratch-gui的源码，并对它进行魔改。但是UI部分写css真的是很让我头皮发麻，所以考虑引入antd。引入antd不难，难得是webpack配置。因为scratch用的是 css module，而antd遵循 es module，antd的样式会污染全局样式，必须单独处理。参考了这篇文章。

1安装antd

$ npm install antd --save

2 配置webpack.config.js

1. 首先在原来开启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
                }
            }

2. 为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吧。溜了