基本示例

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 名稱，并且應該與本食譜其他地方使用的烤肉串名稱相對應。