@h3/thinking-ui

# 原理

# 按需加载

# 实现原理

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

babel-plugin-import

总结一句话就是把

import { H3Modal } from '@h3/thinking-ui';

翻译成

var _button = require('@h3/thinking-ui/lib/modal');
require('@h3/thinking-ui/lib/modal/style/index');

所以只需按照这个目录结构输出, 其他的不多说

lib
├── modal
├── ├── style
├── ├── ├── index.js
├── ├── ├── index.less
├── ├── ├── css.js
├── ├── ├── css.less
├── ├── index.js

# 防止重复打包

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

// webpack.config.js
module.exports = {
  resolve: {
    // ...
    alias: {
      '@h3/thinking-ui': path.resolve(process.cwd()),
    },
  },
}

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

# less主题导出

less变量导出为json，提供给less-loader作为modifyVars，其实现可以参照style/js内的文件

在编译过程中，会把less文件解析为json

←