按需加载

[TOC]

下面关于插件的使用都是针对引用方，而非组件库

组件库相关的配置都会注明是否为组件库及对应文件

使用 babel-plugin-component

• .babelrc

{
...
 "plugins": [
    ...
    ["component", {
      "libDir": "packages",
      "libraryName": "rainbow",
      "style": true
    }, "rainbow"]
  ],
...
}

使用babel-plugin-import

• webpack.config.js

module: {
    rules: [
    ...
     {
        test: /\.js$/,
        include: [],
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@vue/babel-preset-jsx"],
            plugins: [
            ...
              [
                "import",
                {
                  libraryName: "vant",
                  libraryDirectory: "es",
                  style: true,
                },
                "vant",
              ]
              ...
            ],
          },
        },
      }
      ...
    ]
}

lib组件库暴露出特定结构的组件目录

• 参考babel-plugin-component
• 如果配置为上面给出的，则Component directory structure为

- lib // 'libDir'
  - index.js // or custom 'root' relative path
  - style.css // or custom 'style' relative path
  - componentA
    - index.js
    - style.css
  - componentB
    - index.js
    - style.css

lib组件库怎么暴露文件或者文件夹呢

• 一种方式是使用package.json里的files字段

{
 ...
 "files": [
    "lib",
    "src",
    "packages",
    "types"
  ],
 ...
}

• 也可以使用.npmignore,用法和.gitignore一致

/dist/
.storybook/
build/
/lib/
/types/
/packages/**/*.stories.mdx
/packages/**/*.stories.@(js|jsx|ts|tsx)
/node_modules/
.babelrc
.eslintrc.js

引用方（宿主）如何使用

• package.json

"dependencies": {
	"rainbow": "0.0.1"
 }

• bash

npm i

• webpack.*.config.js

module: {
    rules: [
    ...
     {
        test: /\.js$/,
        loader: 'babel-loader',
		include: [
          resolve('src'),
          resolve('node_modules/rainbow/packages'),
          resolve('node_modules/rainbow/src'),
        ]
      ...
    ]
}

• 引用组件

import Vue from "vue";
import {Bubble} from "rainbow";
Vue.use(Bubble)

以上，蟹蟹~