貢獻你的力量 開發一個Vue元件併發布到npm

laoLiueizo發表於2019-02-16
Vue元件NPM

最近在工作中寫了一個面向 PC 端的 Vue 滾動元件，關於 PC 端的滾動元件以前也用過一些，但是沒有找到特別滿意的，所以自己想著把這個元件開源釋出出去，希望能夠幫到和我有類似需求的人吧！

目標

  • 擁有 Dev 模式，能夠邊測試邊開發元件
  • 構建完成後釋出到 npm 上
  • 這個元件能夠全域性註冊 也能夠區域性使用
  • 擁有 demo 能力 依靠於 github 的 pages 功能 直接展現該元件的使用效果

構建基本模版

首先我們需要 vue-cli 來為我們生成一個專案的初始模板。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue init webpack-simple <project-name>
cd project-name
npm init
git init

npm init 和 git init的過程就略過了

修改目錄

接下來在src/目錄下建立一個 components 目錄，隨後在 components 目錄下建立你的元件，比如scrollbars.vue

繼續在src/下建立index.js 這個 js 將會在 build 模式下作為入口 js 進行打包,如果你要匯出多個元件也是可以的，只要匯出一個物件即可

import Scrollbars from `./components/scrollbars.vue`

Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)

export default Scrollbars

配置打包環境

為了方便我們的開發，需要配置一下 webpack 的打包配置。

首先在 package.json 裡增加一條指令碼 dmeo 該命令的作用是一鍵打包出一個用於 demo 頁面的主 js 檔案

"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"

接下來就是比較核心的 webpack 配置

const NODE_ENV = process.env.NODE_ENV

// 為了方便在不同模式下的路徑配置，我們配置三個map物件來匹配具體的模式，減少複雜的判斷
// 三種基本模式
// 1 build - production 用於打包核心元件程式碼 別人引入的就是這個檔案
// 2 dev - development 開發模式 除錯你的元件
// 3 demo - 打包demo資源 打出來的js是包含完整的vue原始碼的

const enteyMap = {
  production: `./src/index.js`,
  development: `./src/main.js`,
  demo: `./src/main.js`
}

const pathMap = {
  production: `./dist`,
  development: `./demo`,
  demo: `./demo`
}

const publicMap = {
  production: `/dist/`,
  development: `/demo/`,
  demo: `/demo/`
}

module.exports = {
  entry: enteyMap[NODE_ENV], // 引入路徑 build模式下直接引入元件自身
  output: {
    path: path.resolve(__dirname, pathMap[NODE_ENV]), // 輸出路徑
    publicPath: publicMap[NODE_ENV], // 資源引入路徑 為了方便我們的demo打包 開發模式和demo模式相同
    filename: `vue-scrollbars.js`, // 你的元件名稱
    library: `vue-scrollbars`, // 填寫元件名稱即可 人家可以通過這個名稱來引入
    libraryTarget: `umd`,
    umdNamedDefine: true
  }
}

進行開發

由於我們修改了 publicPath 我們需要修改一下index.html的 js 路徑

    <script src="./demo/vue-scrollbars.js"></script>
npm run dev

開始開發吧，盡情的在app.vue中引入你的元件並進行除錯開發

建立demo

npm run demo

打包完成後你可以嘗試在工程根目錄執行http-server來檢查demo能否正常執行。

到這一步你可以push到你的github倉庫，並把gh-pages設定成master分支，那個地址應該就能展示你的demo了，別忘了放到readme中讓大家看看哦！

釋出

在最後的釋出前記得在package.json裡面填寫上版本，關鍵詞，描述，license等資訊，並且寫好README.md,LICENSE等檔案. 這樣可以更好的讓別人瞭解和使用你的專案哦。

npm login
npm publish

注意可能會出現重名情況，這時候請使用你賬戶的名稱空間

修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 別人引入的時候也要
加名稱空間

最後還是留點私心，宣傳一下最近寫的一個滾動元件，主要面向 PC 端 ，如果你有類似的需求 不妨看看[https://github.com/zhangzheng…]

相關文章