Vue多組件倉庫開發(fā)與發(fā)布詳解

更新時間：2019年02月28日 10:12:44 作者：Fanz

這篇文章主要介紹了Vue多組件倉庫開發(fā)與發(fā)布詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在開發(fā)組件時，我們可能會期望一類組件放在同一個代碼倉庫下，就像element那樣，我們可以使用element提供的腳手架，也可以使用vue cli 3創(chuàng)建一個更‘新'的項目。

項目創(chuàng)建

通過vue cli 3創(chuàng)建項目，創(chuàng)建文件夾packages用于存放組件。

單個組件目錄

在packages下就是每一個組件，每個組件和單獨項目一樣，會有package.json、README.md、src、dist等文件及目錄。

如何演示/調(diào)試組件

在組件開發(fā)過稱中，我們需要對組件進行展示，所以創(chuàng)建了examples文件夾，用于存放每個組件示例。

通過一個列表展示出所有的組件，點擊選擇當前開發(fā)的組件，進入對應的example。

路由的根就是一個導航列表，然后每個組件對應一個路由，通過一個配置文件的components.js來生成這個路由。

// 路由
import Navigation from "./Navigation";
import components from "./components";

let routes = components.map(component => ({
 path: `/${component.name}`,
 component: () => import(`../examples/${component.name}`)
}));

routes.unshift({
 path: "",
 component: Navigation
});

export default routes;

自動化腳本

創(chuàng)建/編譯/發(fā)布

創(chuàng)建新的組件，需要修改components.js配置文件，在examples和packages下創(chuàng)建對應目錄。

編譯/發(fā)布組件，因為倉庫下會有多個組件，如果一次發(fā)布多個，就需要進入每個文件夾下執(zhí)行命令。

上面過程實現(xiàn)自動化，有很多種方式，比如可以通過npm run <script>，可以直接通過node命令等。這里我參考element，采用了Makefile。

創(chuàng)建script文件夾，其中包括創(chuàng)建腳本new.js和構(gòu)建腳本build.js。

創(chuàng)建腳本

創(chuàng)建腳本主要就是目錄的創(chuàng)建與文件的寫入，其中可能需要注意的可能就是格式問題。

一種方式是在``之間，按照規(guī)范格式去完成寫入內(nèi)容，這樣做比較麻煩，而且可能面臨格式化要求修改問題。

另一種方式是在腳本中引入eslint，腳本中的eslint.CLIEngine可以根據(jù)配置文件(比如.eslintrc.js)格式化文件。需要注意的是需要比命令行中配置需要多添加fix: true配置, 如下

const CLIEngine = eslint.CLIEngine;
const cli = new CLIEngine({ ...require("../.eslintrc.js"), fix: true });

eslint在腳本中的使用方法，更具體的可以參考eslint文檔中Node.js API部分。

// scripts/new.js部分
...

components.push({
 label: newName,
 name: newName
})

const updateConfig = function(path, components) {
 writeFile(path, `module.exports = ${JSON.stringify(components)}`).then(() => {
  console.log("完成components.js")
  // 格式化
  CLIEngine.outputFixes(cli.executeOnFiles([configPath]))
 })
}

const createPackages = function(componentName) {
 try {
  const dir = path.resolve(__dirname, `../packages/${componentName}/`)
  // 創(chuàng)建文件夾
  if (!fs.existsSync(dir)) {
   fs.mkdirSync(dir)
   console.log(`完成創(chuàng)建packages/${componentName}文件夾`)
  }
  // 寫入README
  if (!fs.existsSync(`${dir}/README.md`)) {
   writeFile(
    `${dir}/README.md`,
    `## ${componentName}
 
 ### 使用說明
      `
   ).then(() => {
    console.log("完成創(chuàng)建README")
   })
  }
  // 寫入package.json
  if (!fs.existsSync(`${dir}/package.json`)) {
   writeFile(
    `${dir}/package.json`,
    `{
 "name": "@hy/${componentName}",
 "version": "1.0.0",
 "description": "${componentName}",
 "main": "./dist/hy-${componentName}.umd.min.js",
 "keywords": [
  "${componentName}",
  "vue"
 ],
 "author": "",
 "license": "ISC"
}
    `
   ).then(() => {
    console.log("完成創(chuàng)建package.json")
   })
  }
  // 創(chuàng)建index.js
  if (!fs.existsSync(`${dir}/index.js`)) {
   writeFile(`${dir}/index.js`, `export {}`).then(() => {
    console.log("完成創(chuàng)建index.js")
    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.js`]))
   })
  }
 } catch (err) {
  console.error(err)
 }
}

const createExample = function(componentName) {
 try {
  const dir = path.resolve(__dirname, `../examples/${componentName}/`)
  // 創(chuàng)建文件夾
  if (!fs.existsSync(dir)) {
   fs.mkdirSync(dir)
   console.log(`完成創(chuàng)建examples/${componentName}文件夾`)
  }
  // 寫入index.vue
  if (!fs.existsSync(`${dir}/index.vue`)) {
   writeFile(
    `${dir}/index.vue`,
    `<template>

</template>

<script>
import { } from '../../packages/${componentName}/index'

export default {
 components: {}
}

</script>
   `
   ).then(() => {
    console.log(`完成創(chuàng)建examples/${componentName}/index.vue文件`)
    // 格式化index.vue
    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.vue`]))
   })
  }
 } catch (err) {
  console.error(err)
 }
}

...

構(gòu)建腳本

// build.js
...

async function build() {
 for (let i = 0, len = components.length; i < len; i++) {
  const name = components[i].name
  await buildService.run(
   "build",
   {
    _: ["build", `${root}/packages/${name}/src/index.js`],
    target: "lib",
    name: `hy-${name}`,
    dest: `${root}/packages/${name}/dist`,
    // 生成格式: umd格式會同時成功demo.html commonjs,umd,umd-min
    formats: "commonjs,umd-min"
    // clean: false
   },
   ["--target=all", `./packages/${name}/src/index.js`]
  )
 }
}

...

Lerna

lerna是一個多包倉庫管理的工具，可以幫助創(chuàng)建、管理、發(fā)布多包倉庫中的包。

關(guān)于lerna我也沒有太深入得使用，只是用到了發(fā)布。首先在項目下執(zhí)行init初始化了項目，在每次commit之后，可以執(zhí)行publish。lerna會對應代碼庫打tag，并發(fā)布到npm倉庫。

項目版本問題

0.0.1為不規(guī)范版本號，最小應該從1.0.0開始。npm publish無法發(fā)布，但是lerna publish可以發(fā)布。

導致結(jié)果安裝為固定版本號，而不是以^開頭的版本號范圍。outdate可以檢測到有更新，無法通過update升級。

組件開發(fā)

組件開發(fā)主要是在packages/<component name>/src目錄下進行，在example/<component name>/目錄下可以引入該組件src下的源文件，用一些數(shù)據(jù)來進行開發(fā)測試。組件開發(fā)和項目中的組件開發(fā)基本相同。

作為組件庫中的組件，需要更多的考慮其通用性和易用性。不能為了通用而加入很多的屬性，而使其失去易用性；同樣也不能為了易用，而使其過于簡單，使用范圍過于局限。

對于每一個屬性、每個拋出去的方法，都需要認真考慮其必要性。

唯一不同的地方可能需要注意的是導出的方式。

一種是直接導出組件，這種形式在使用時需要引入，并且在components中聲明，也就是局部注冊。