使用

// 安装npm包
yarn install @duyanren/miniapp-ui
or npm i @duyanren/miniapp-ui
// 引入完整样式文件
import '@duyanren/miniapp-ui/dist/style/components/index.scss';

// 按需加载样式
1. yarn add babel-plugin-import
2. 在babel.config.js中配置

[
  'import',
      {
        libraryName: '@duyanren/miniapp-ui',
        camel2DashComponentName: false,
        customName: name => {
          return `@duyanren/miniapp-ui/lib/components/${name}`;
        },
        customStyleName: name =>
          `@duyanren/miniapp-ui/dist/style/components/${name}.scss`,
      },
      '@duyanren/miniapp-ui',
]



// 本地调试npm包

1. miniapp-ui目录下 pnpm link --global
2. 切换到业务项目目录下 pnpm link --global @duyanren/miniapp-ui
3. npm run dev:rollup

组件按需引用两种方式

• 经典方法：组件单独分包 + 按需导入 + babel-plugin-import（自动化按需引入）

import Button from 'xxx-ui/packages/button';
import 'xxx-ui/theme-chalk/button.css';

Vue.use(Button);

这样我们就只引入了Button相关的文件，而不会包含其他组件。这样的问题是比较麻烦，使用成本较高，使用者需要知道组件库的一些路径等。最理想的方式还是下面这种：

import { Button } from 'xxx-ui';

既然想通过以上这种简单的方式引入组件和相关的样式文件等文件，那么我们只要帮使用者把第一种方式转换成第二种就可以了。而通过babel插件来转换对用户来说是无感的。主流组件库也是这样实现的，比如Element UI使用的是babel-plugin-component插件。大致思路就是这样，如果需要实现这种方式的按需引入，则需要为自己的组件库开发一个类似的babel插件，通过AST抽象语法树进行一个转换。具体实现可参考babel-plugin-import源码。

Ant Design也是采用这种方式，只是使用的插件不一样。它用的是babel-plugin-import，其实babel-plugin-component就是fork自babel-plugin-import的。

• 次时代方法：ESModule + Treeshaking + 自动按需import

1. 组件库应打包为 es module 模块

commonjs规范是最常见的使用方式，umd一般用于CDN方式直接在页面引入，而es module就是用来实现Tree Shaking的，为什么es module能实现Tree Shaking而commonjs规范不行呢，原因是es module是静态编译的，也就是在编译阶段就能确定某个模块导出了什么，引入了什么，代码执行阶段不会改变，所以打包工具在打包的时候就能分析出哪个方法被使用了，哪些没有，没有用到的就可以放心的删掉了。

此外，需要在组件库的package.json文件中的"module"属性指定包的es module模块入口，会优先于"main"属性生效。

2. 组件库应按规范导出各组件

接下来我们还要修改一下组件库中各组件的导出方法，不独立分包，所有组件暴露在一个入口文件中。这样才能支持以下这种使用方式：

import { Button } from 'xxx-ui';

我们需要保证最终在入口文件（如index.js）中导出各具名组件，如：

// 可以在入口文件引入全局样式文件，同时配置 sideEffects 以保证 tree-shaking 不会把样式文件移除
// import './style.css';
// 如果没有配置 sideEffects 在主项目中使用组件库时还需要手动引入打包产物中的样式文件
// ...

import XButton from '@/components/button';
import XInput from '@/components/input';
import XDialog from '@/components/dialog';
// ...

export {
  XButton,
  XInput,
  XDialog,
  // ...
};