search

yaoningvital / blog

my blog
31 stars 4 forks source link

在react中配置UI库'antd'和'antd-mobile'的按需加载 #69

Open yaoningvital opened 5 years ago

yaoningvital commented 5 years ago

React UI库 'antd'和'antd-mobile'按需加载的方式

在react项目中，引用了UI库 'antd'和'antd-mobile'。配置UI库的按需加载，有两种方式：

1、使用 babel-plugin-import （推荐）

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
  ]
}

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

这种方式需要先安装 babel-plugin-import，然后到.babelrc 中进行配置，或者到 webpack 的配置文件中进行 babel-loader option 的配置。

2、手动引入

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS
import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS
// import 'antd-mobile/lib/date-picker/style';         // 加载 LESS

在项目中，我试了这种方式，是可以的，它就是直接引用模块中对应的子模块，没有用到的模块就不会导入。但是这种方式比较麻烦。

使用 babel-plugin-import 的三种配置方式

1、配置 .babelrc

第一种方式中，我没有找到 .babelrc 文件，用npm run eject命令弹出隐藏的配置文件后，也没有找到。

2、配置 webpack

这种方式经实践是可以的。 （1）首先要用 npm run eject命令，将react项目中隐藏的文件弹出 如果你的项目是用create-react-app脚手架搭建的，会自动隐藏很多的配置文件，包括 webpack 的配置文件也会被隐藏起来。如果想通过配置webpack配置文件的方式来按需引入 'antd'和'antd-mobile' 模块时，就需要使用这个命令，将隐藏的配置文件弹出来。

执行命令后，会有一个 config 文件夹，里面就有 webpack.config.js 。

（2）修改 webpack.config.js 中 babel-loader的option 我做了下面的修改： image

image

上图中，红框部分是我新增的内容。 通过上面的配置，项目也能跑起来，并且没有警告说我加载了整个模块。

3、配置 package.json

第三种方式是通过修改 package.json 文件中 babel 选项，也能实现按需加载的配置。配置如下：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        },
        "antd-mobile"
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        },
        "antd"
      ]
    ]
  }

遇到的坑

我在项目中按照上面的第三种方式配置好了，但是项目跑起来后，发现控制台有警告： image

检查代码之后，我发现代码中有一个地方引用组件是这样引用的： image

然后我试着把它修改了，改成正常的：

import { Toast } from 'antd-mobile';

然后，就没有上面的警告了。所以，这个'antd-mobile/lib/index'文件，应该是一个完整的库，哪怕你做了按需引入的配置，但是这里手动引用了这个完整的库，当然肯定会报警。

我在用webstorm 编辑时，上图中的引用经常会出现，是比如在拷贝一段代码到别的文件时，编辑器自动加上的，所以这个坑可能会经常出现。

yaoningvital commented 5 years ago

今天在做一个项目，在不弹出隐藏的配置文件的前提下，用上面的第三种方式，发现并不起作用。估计上一次起作用，是因为已经弹出了隐藏的配置文件。

下面补充一下，在不弹出隐藏的配置文件的前提下，怎样实现antd的按需加载。

1、安装 babel-plugin-import、customize-cra、react-app-rewired

npm i babel-plugin-import  customize-cra  react-app-rewired  -D

2、修改package.json

将 scripts 中的 start 命令由：

"scripts": {
    "start": "react-scripts start"
  },

修改为：

"scripts": {
    "start": "react-app-rewired start"
  },

3、在项目根目录创建一个 config-overrides.js 用于修改默认配置。

config-overrides.js文件内容为：

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
)

此时，就可以了，重新运行npm start就可以看到已经实现了按需加载。

然后只需从 antd 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';