【实践相关】组件库打包与发布

[guapi233]

组件库打包与发布

适用于Vue组件库的包括

创建空的项目

首先先创建一个空的Vue项目，执行指令：vue create [项目名称]

创建组件所在文件夹

将默认的组件与不需要的文件夹删掉，创建一个专门用于存放组件的文件夹，将组件移入文件夹中（组件中使用的字体图标等资源也需要移入该文件夹中）。

配置Vue

创建在根目录创建vue.config.js文件，并配置以下信息：

const path = require("path");

module.exports = {
  pages: {
    index: {
      // 修改项目的入口文件
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html",
    },
  },

  // 拓展webpack配置，使 components 加入编译（component为举例组件文件夹）
  chainWebpack: (config) => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "components"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        // 修改它的选项
        return options;
      });
  },
};

打包前的准备

如果不想将包上传至npm可以跳过此步骤

• 打开package.json
• 确保其中name在npm中唯一
• 将private修改为false
• 指定包入口文件字段main，值为入口文件路径
• 可以创建.npmignore文件来过滤上传文件

打包组件库

Vue打包指令：vue-cli-service build --target lib [入口路径]

发布到npm

登录：npm login

发布：npm publish

PS：发布前需保证源为npm本源