從零開始開發一個vue組件打包併發布到npm (把vue組件打包成一個能夠直接引用的js文件)

時間 2020-09-14

標籤開始開發一個 vue 組件打包併發 npm 能夠直接引用文件欄目 JavaScript 简体版

原文原文鏈接

本身寫的組件有的也挺好的，爲了方便之後用本身再用或者給別人用，把組件打包發佈到npm是最好不過了，本次打包支持支持正常的組件調用方式，也支持Vue.use, 也能夠直接引用打包好的js文件，配合vue.js 就不須要webpakc這種構建工具了，能夠直接在頁面內使用，下面以 ‘yyl-npm-practice’ 這個包爲例javascript

第一步：使用 vue init webpack-simple yyl-npm-practice 初始化項目

提示: 不要用 vue init webpack npm-practice 初始化項目，由於咱們就開發個組件，不須要那麼多配置，配置多了修改起來也麻煩，webpack-simple足夠了。css

初始完項目，按照提示輸入項目信息便可，而後 npm install , npm run dev 讓項目跑起來，以下圖：html

第二步：修改文件目錄

1.在src目錄下新建components文件夾，而後在此文件夾下創建Main.vue文件

　　Main.vue 名字也能夠是其餘，咱們寫的這個組件就是放在該文件裏面，以前的App.vue是用於本地開發，測試用的入口文件，也就是用於 npm run dev 的入口文件。vue

2.在webpack.config.js同級目錄（也是該組件的根目錄）下新建 index.js文件， index.js是把Main.vue文件暴露出去的出口。

修改完以後的文件目錄以下，標紅的就是新增的內容：java

第三步：修改文件內容，配置

1.Main.vue內容以下（注意name）：

<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'yyl-npm-practice',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props: {
      propData: {
          type: String,
          default: '我是默認值'
      }
  }
}
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>

2.App.vue內容以下：

<template>
  <div>
    <Main :propData='initData'/>
  </div>
</template>

<script>
import Main from './components/Main'
export default {
    data(){
      return {
        initData: 'hello 你好'
      }
    },
    components:{
      Main
    }
}
</script>

<style>

</style>

3.index.js內容以下：

import Main from './src/components/Main'

// 這一步判斷window.Vue是否存在，由於直接引用vue.min.js，它會把Vue綁到Window上，咱們直接引用打包好的js才能正常跑起來。

if (typeof window !== 'undefined' && window.Vue) {

window.Vue.component('yyl-npm-practice', Main)

}

//這樣就可使用Vue.use進行全局安裝了。

Main.install = function(Vue){

Vue.component(Main.name, Main)

}

export default Main

------ start 2019-05-06新增
index.js內容改完以下， 由於使用 window.Vue.component('yyl-npm-practice', Main) 的時候 外部引用的時候 有可能會覆蓋該組件，致使組件沒法正常使用；
使用下面的的定義方式後， 在.vue 環境下 使用方式不變， 在只引用 ys-expression.js 環境下 需在 new Vue（） 以前加 window['ys-expression'].default.install();

import Main from './src/component/Main'
import _Vue from 'vue'

Main.install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(Main.name, Main)
}
export default Main;

------ end 2019-05-06新增

4.修改package.json

package.json須要修改private字段(private是true的時候不能發佈到npm,需設置成false)；並增長main字段， main字段是require方法能夠經過這個配置找到入口文件，這輸入模塊加載規範，具體能夠參考這裏，主要內內容截圖以下：node

修改完package.json以下，標紅的就是新增和改變的屬性。jquery

5.修改 webpack.config.js

其實就是修改entry 和output,截圖以下：
webpack

說明：入口會根據開發環境，生產環境切換， main.js 是npm run dev 的入口，就是App.vue，用於調試/測試咱們開發的組件; index.js是Main.vue，就是咱們開發的組件，咱們打包到生產環境打包就只是單純的 yyl-npm-practice 組件web

6.修改index.html的js引用路徑，由於咱們修改了output 的 filename，因此引用文件的名字也得變。

到此組件就開發完了，打包下看看， npm run build dist下生成了倆文件，以下：express

這個.map文件怎麼回事，其實就是這段代碼：

生產環境的時候，咱們就不調試了，也不想要這個.map文件，那就先把這個 devtool刪了，而後放在這裏，看下圖，只要在開發環境的時候才啓用這個調試，

把dist目錄下的倆文件刪除，再npm run build 就不會產生.map文件了。

npm run dev 讓項目跑起來，咱們在App.vue裏面調用該組件，並作測試，調試。

第四步：發佈到npm

1. 去 npm 官網註冊個帳號 https://www.npmjs.com/

2.在該組件根目錄下的終端（就是日常輸入 npm run dev的地方），運行npm login，會提示輸入我的信息，Email是發佈成功後，自動給這個郵箱發送一個郵件，通知發佈成功，輸入完，登陸成功。

3.最後就能夠發佈了， npm publish, 以下，發佈成功(每次發佈的時候packa.json 裏面的 version不能同樣，否則不能發佈出去，手動改下版本就行)

去本身的npm上點擊Packages ，就能看到發佈的包

包的具體信息以下：

你們最好在readme 裏面寫上組件的使用方法，說明等等，方便你我他。

使用方法：

1.組件內部使用

html:

　　<Main/>

js：

import Main from 'yyl-npm-practice'

components: {

Main

}

2. main.js 全局安裝：

import Main from 'yyl-npm-practice'

Vue.use(Main)

而後在其餘.vue文件裏面，直接使用組件 <yyl-npm-practice/> 便可

3.直接引用打包後的 yyl-npm-practice.js

這種方式就不須要webpack這類的構建工具，跟jquery的方式差很少，能夠直接頁面引用，使用方法示例以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <yyl-npm-practice :propData="propData"></yyl-npm-practice>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/yyl-npm-practice.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        propData: '11111111111111111111'
      }
    },
    methods: {
    }
  })
</script>
</body>
</html>

採坑記錄：

1.在webpack.config.js裏設置 resolve（好比設置@作爲根目錄），開發環境沒問題，生產環境就用不了了，因此你們就用日常的相對路徑類吧，雖然麻煩了點。

2.圖片生產環境不能用，解決方法能夠把圖片轉成base64, 能夠用這個在線圖片轉base64,或者把圖片放在網上，引用圖片的網上資源路徑。

3.字體圖標在生產環境也用不了，若是用到了字體圖標，就別把字體圖標的資源打包進去了，引用該組件的時候，須要再引用字體圖標的資源。

start ====> 2019-04-17更新

　　　　後來發現其實圖片和字體圖標也可一塊兒打包到js裏面，須要用到 url-loader 把limit參數設置大點就行，這樣就能夠把圖片，字體圖標也都打包到js裏面了，這樣使用的時候，就不用單獨引用這些靜態資源了，代碼以下：

  {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]',
          limit: 99999
        }
      },
      { 
      　　test: /\.(svg|ttf|eot|woff|woff2)$/, 
      　　loader: 'url-loader', 
      　　options:{ 
  　　　　   name:'[name].[ext]',
            limit: 9999999
      　　} 
      }

end ====> 2019-04-17更新

想看源碼的話，只要在本身項目裏 npm install yyl-npm-practice 就能夠在 node_modules 下找到了。