# 组件库的构建原理

组件库的编译时需要考虑：

支持按需加载
防止webpack多个chunk之间，有重复打包的情况；

# 按需加载

按需加载主要靠babel-plugin-import和ts-import-plugin实现，可以查看插件文档；

总结一句话就是把

import { H3Modal } from '@lateinos/awesome-ui';

翻译成

var _modal = require('@lateinos/awesome-ui/lib/modal');
require('@lateinos/awesome-ui/lib/modal/style/index');

打包前的目录：

src
├── components
├── ├── modal
├── ├── ├── index.vue
├── ├── ├── index.js
├── ├── ├── style
├── ├── ├── ├── index.js
├── ├── ├── ├── index.less
├── utils
├── ├── dom.js
├── ├── object.js

打包后支持按需加载的目录：

lib
├── modal
├── ├── style
├── ├── ├── index.js
├── ├── ├── index.less
├── ├── index.js
dist
├── utils
├── ├── dom.js
├── ├── object.js

# 防止重复打包

# webpack配置

{
  entry: {
    'modal': './src/components/modal'
  },
  resolve: {
    alias: {
      '@lateinos/awesome-ui': path.resolve(process.cwd()),
    },
  },
  externals: {
    '@lateinos/awesome-ui/src/components/modal': '@lateinos/awesome-ui/lib/components/modal'
  }
}

因为按需加载将组件分多入口打包，很容易导致 被多个入口引用的代码，被重复打包 所以可以参照externals中的配置，将组件入口作为外部调用。

这里利用的原理就是开发环境下，@lateinos/awesome-ui作为webpack别名解析为路径；生产环境下，@lateinos/awesome-ui作为node_modules引用自身；

# babel编译

执行npm scripts, 使用tsc 和 babel对非出口文件做单独编译

// package.json
{
  scripts: {
    "tsc": "cross-env tsc -p ./build/tsconfig.json",
    "babel": "cross-env BABEL_ENV=dist babel es/ --out-dir dist --ignore dist/"
  }
}

这里将来会使用gulp tasks重构；

# less主题导出

主题库的切换，核心原理是运用less modifyVars (opens new window);

在编译构建时，将包含less modifyVars的json导入到less-loader中;

主题库目录结构：

core
├── theme
├── ├── color.less # less变量定义 默认主题
presets
├── cloudpivot
├── ├── back # 云枢后台主题
├── ├── ├── index.less # 定制主题，覆盖core中的变量
├── ├── ├── index.js # 根据less转换成的js文件
├── h3yun
├── ├── deep3.0 # 氚云3.0默认主题
├── ├── ├── index.less # 定制主题，覆盖core中的变量
├── ├── ├── index.js # 根据less转换成的js文件
├── ├── default # 氚云默认主题
├── ├── ├── index.less # 定制主题，覆盖core中的变量
├── ├── ├── index.js # 根据less转换成的js文件

less 文件会经过脚本转换为js文件，来注入到less-loader中

// core/color.less
@h3-primary-color: #107fff;
// presets/cloudpivot/index.less
@h3-primary-color: #17BC94;

经过脚本转换：

{
  globalVars: {
    "@h3-primary-color": "#107fff"
  },
  modifyVars: {
    "@h3-primary-color": "#17BC94"
  },
}

在使用主题库时：

// webpack.config.js
// 以云枢PC端后台主题为例
const lessVars = require('@/h3/theme/presets/cloudpivot/back');
// ... 其他配置
module: {
  rules: [
    // ... 其他配置
    {
      test: /\.less$/,
      use: [
        // ... 其他loader
        {
          loader: 'less-loader',
          options: { // less-loader@5.0.0-
            ...lessVars,
            javascriptEnabled: true,
          },
          options: { // less-loader@6.0.0+
            lessOptions: {
              ...lessVars,
              javascriptEnabled: true,
            },
          },
        },
      ],
    },
  ];
}

← 开发规范