上传npm包加强

上一篇文章说了封装一个组件简单上传一个npm包，那想在一个包里上传多个组件应该怎么做呢？就像element，antd那种，其实在一个 npm 包中封装多个组件是完全可行的，很多开源库也会这样做。你只需要按照正确的结构进行导出和配置。具体来说，你可以通过以下方式将多个组件封装到一个 npm 包中，并提供一个清晰的 API 供用户使用。

1. 目录结构

假设你封装了多个组件，每个组件都有自己的文件，你可以按照以下目录结构组织项目：

my-components/
  ├── src/
  │   ├── MyComponent1.vue
  │   ├── MyComponent2.vue
  │   └── MyComponent3.vue
  ├── dist/
  │   └── index.js          # 导出多个组件
  ├── package.json
  ├── README.md
  └── .npmignore

2. 组件导出

在 src 目录下，每个组件都是一个单独的文件。你可以在 dist/index.js 中统一导出这些组件。

例如，假设你有三个 Vue 组件 MyComponent1.vue、MyComponent2.vue 和 MyComponent3.vue，你可以在 dist/index.js 中如下导出它们：

src/MyComponent1.vue（第一个组件）

<template>
  <div>
    <p>这是组件 1</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent1'
}
</script>

src/MyComponent2.vue（第二个组件）

<template>
  <div>
    <p>这是组件 2</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent2'
}
</script>

src/MyComponent3.vue（第三个组件）

<template>
  <div>
    <p>这是组件 3</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent3'
}
</script>

dist/index.js（导出所有组件）

import MyComponent1 from '../src/MyComponent1.vue';
import MyComponent2 from '../src/MyComponent2.vue';
import MyComponent3 from '../src/MyComponent3.vue';

export {
  MyComponent1,
  MyComponent2,
  MyComponent3
};

你可以根据需要决定导出哪些组件。例如，如果你想让用户能通过解构来选择性地导入某个组件，可以按上面的方式导出。

3. 更新 package.json

确保 package.json 中的 main 字段指向 dist/index.js，以便其他开发者通过 npm 安装后，可以直接访问到你封装的组件。

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "A package of multiple Vue components",
  "main": "dist/index.js",  // 设置入口文件
  "scripts": {
    "build": "webpack --config webpack.config.js"  // 或者你的构建工具
  },
  "keywords": [
    "vue",
    "components",
    "UI"
  ],
  "author": "my",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/my/my-components.git"
  },
  "bugs": {
    "url": "https://github.com/my/my-components/issues"
  },
  "homepage": "https://github.com/my/my-components#readme"
}

4. 打包和发布

确保你的组件已经构建好并准备好发布。你可以使用像 webpack、rollup 等构建工具将 .vue 文件和其他资源编译成可以在浏览器和 Node.js 中使用的格式。

示例 webpack.config.js 配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'myComponents',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue', '.json']
  },
  plugins: [
    new (require('vue-loader').VueLoaderPlugin)()
  ]
};

5. 使用组件

在其他项目中，你可以通过 npm 安装并使用这些组件。例如，在安装并导入后，你可以选择性地引入你需要的组件：

npm install my-components

导入组件

你可以像下面这样导入单个或多个组件：

// 导入某个特定的组件
import { MyComponent1 } from 'my-components';

// 导入所有组件
import * as Components from 'my-components';

在 Vue 项目中使用

import Vue from 'vue';
import { MyComponent1, MyComponent2 } from 'my-components';

Vue.component('MyComponent1', MyComponent1);
Vue.component('MyComponent2', MyComponent2);

或者你也可以按需导入：

import { MyComponent1 } from 'my-components';

export default {
  components: {
    MyComponent1
  }
}

6. 发布到 npm

发布多个组件到 npm 的过程和单个组件相同，你只需要确保 dist/index.js 文件正确导出了所有组件。然后按照以下步骤发布你的包：

1. 登录到 npm（如果尚未登录）：

   npm login
   

2. 发布包：

   npm publish --access public
   

   总结

   在一个 npm 包中封装多个组件，关键在于正确导出并组织你的组件。在 dist/index.js 文件中统一导出所有组件，并在 package.json 中设置好入口。这样，用户可以灵活地选择和使用你包中的任何组件。如果你想要进一步优化组件的构建过程，可以使用如 webpack 或 rollup 等工具进行打包。