貢獻你的力量 開發一個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...]