为npm打包Vue组件

基本示例

Vue 组件本质上是要重用的。当组件仅在单个应用程序中使用时，这很容易。但是如何编写一个组件并在多个站点/应用程序中使用它呢?也许最简单的解决方案是通过 npm。

通过打包你的组件以通过 npm 共享，它可以被导入/需要到构建过程中以用于成熟的 Web 应用程序：

import MyComponent from 'my-component';
export default {
  components: {
    MyComponent,
  },
  // rest of the component
}

甚至<script>直接在浏览器中通过标签使用：

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/my-component"></script>
...
<my-component></my-component>
...

这不仅可以帮助您避免复制/粘贴组件，还可以让您回馈 Vue 社区!

为 npm 打包组件

就本节而言，假设以下文件结构：

package.json
build/
   rollup.config.js
src/
   wrapper.js
   my-component.vue
dist/

在本文档中，引用了上面列出的 package.json 文件。这些示例中使用的文件是手工生成的，将包含当前讨论/任务所需的最低配置。您自己的 package.json 文件可能包含的内容比此处列出的要多得多。

npm 如何知道为浏览器/构建过程提供哪个版本?

npm 使用的 package.json 文件实际上只需要一个版本 ( main)，但事实证明，我们不仅限于此。我们可以通过指定 2 个附加版本(module和unpkg)来解决最常见的用例，并.vue使用该browser字段提供对文件本身的访问。示例 package.json 如下所示：

{
  "name": "my-component",
  "version": "1.2.3",
  "main": "dist/my-component.umd.js",
  "module": "dist/my-component.esm.js",
  "unpkg": "dist/my-component.min.js",
  "browser": {
    "./sfc": "src/my-component.vue"
  },
  ...
}

当使用 webpack 2+、Rollup 或其他现代构建工具时，它们会在module构建过程中发挥作用。遗留应用程序将使用main构建，并且unpkg构建可以直接在浏览器中使用。事实上，当有人将您的模块的 URL 输入到他们的服务中时，unpkg cdn 会自动使用它!

SSR使用

您可能已经注意到一些有趣的事情 - 浏览器不会使用该browser版本。这是因为该字段实际上旨在允许作者向打包程序提供提示，打包程序反过来创建自己的包供客户端使用。有了一点创意，这个字段允许我们将别名映射到.vue文件本身。例如：

import MyComponent from 'my-component/sfc'; // Note the '/sfc'

兼容的打包器查看browserpackage.json 中的定义并将请求my-component/sfc转换为my-component/src/my-component.vue，从而导致使用原始.vue文件。现在 SSR 进程可以使用它需要的字符串连接优化来提高性能。

注意：.vue直接使用组件时，注意script和style标签需要的任何类型的预处理。这些依赖项将传递给用户。考虑提供“普通”的 SFC 以尽可能地保持简单。

如何制作组件的多个版本?

无需多次编写模块。可以在几秒钟内一步准备好模块的所有 3 个版本。由于其最小配置，此处的示例使用Rollup，但其他构建工具也可以使用类似的配置 - 有关此决定的更多详细信息可以在此处找到。package.jsonscripts部分可以更新为每个构建目标的单个条目，以及一次build运行它们的更通用的脚本。示例 package.json 文件现在看起来像这样：

{
  "name": "my-component",
  "version": "1.2.3",
  "main": "dist/my-component.umd.js",
  "module": "dist/my-component.esm.js",
  "unpkg": "dist/my-component.min.js",
  "browser": {
    "./sfc": "src/my-component.vue"
  },
  "scripts": {
    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/my-component.umd.js",
    "build:es": "rollup --config build/rollup.config.js --format es --file dist/my-component.esm.js",
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
  },
  "devDependencies": {
    "rollup": "^1.17.0",
    "@rollup/plugin-buble": "^0.21.3",
    "@rollup/plugin-commonjs": "^11.1.0",
    "rollup-plugin-vue": "^5.0.1",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
    ...
  },
  ...
}

请记住，如果您有一个现有的 package.json 文件，它可能会包含比这个文件更多的内容。这仅说明了一个起点。此外，在 devDependencies 中列出的包(不是它们的版本)是汇总创建提到的三个独立构建(umd、es 和 unpkg)的最低要求。当新版本可用时，应根据需要更新它们。

我们对 package.json 的更改已完成。接下来，我们需要一个小的包装器来导出/自动安装实际的 SFC，加上一个最小的 Rollup 配置，我们就设置好了!

如何配置 Rollup 构建?

scripts准备好package.json部分并准备好 SFC 包装器后，剩下的就是确保正确配置 Rollup。幸运的是，这可以通过一个 16 行的小文件 rollup.config.js 来完成：

import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
export default {
    input: 'src/wrapper.js', // Path relative to package.json
    output: {
        name: 'MyComponent',
        exports: 'named',
    },
    plugins: [
        commonjs(),
        vue({
            css: true, // Dynamically inject css as a <style> tag
            compileTemplate: true, // Explicitly convert template to render function
        }),
        buble(), // Transpile to ES5
    ],
};

此示例配置文件包含为 npm 打包 SFC 的最低设置。有自定义的空间，例如将 CSS 提取到单独的文件中，使用 CSS 预处理器，丑化 JS 输出等。

此外，值得注意的name是这里给定的组件。这是组件将被赋予的 PascalCase 名称，并且应该与本食谱其他地方使用的烤肉串名称相对应。