dazjean / srejs Goto Github PK

按需加载第三方组件库（antd-mobile, Ant Design,element-ui）

antd 默认支持基于 ES module 的 tree shaking，不使用babel-import-plugin插件也会有按需加载的效果。

• react组件库（antd-mobile, Ant Design）

.bablerc文件修改如下

{
    "plugins": [
        ["import", {
            "libraryName": "cheui-react",
            "libraryDirectory": "lib/components",
            "camel2DashComponentName": true 
        },"cheui-react"],
        ["import", {
            "libraryName": "antd-mobile",
            "libraryDirectory": "lib"
        },"antd-mobile"]
    ]
}

• vue组件库（Element-UI ,ant-design-vue）

.bablerc文件修改如下

{
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ],
      ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "lib" }]
    ]
}

第三方组件库使用ES modules时编译失败

为了加快项目构建速度，框架默认为webpack配置依赖的bable-loader添加了exclude: /node_modules/，当某个第三方组件库使用es模式移入时，需要覆盖webpack配置或者将组件库从node_modules中提取出来作为项目文件引入。

• 覆盖webpack配置

dart-sass编译警告

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $baseFontSize)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
5 │   @return $px / $baseFontSize * 1rem;
  │           ^^^^^^^^^^^^^^^^^^^
  ╵
    web/pages/verify/static/css/fun.scss 5:11  rem()
    stdin 4:17                                 root stylesheet

node-sass升级成使用dart-sass之后，有部分sass语法不兼容警告，可通过包 sass-migrator自动修复

npm -i sass-migrator -g
sass-migrator division ./**/*.scss

已知问题：webpack/webpack#11146
待升级webpack5后解决