vue組件封裝成npm包

以我自己封裝的一個npm包為例，用於音頻打點切分，展示音頻波形圖，波形圖選區播放等，如下圖： 

 傳送門：

npm: https://www.npmjs.com/package/audio_wave_plugin

github源碼:https://github.com/panxiaoxiao0823/audio_wave_plugin

封裝過程：

1.初始化vue簡單模板：

vue init webpack-simple audio_wave_plugin
cd audio_wave_plugin
npm install
npm run dev

2.創建，目錄結構如下：

src/myPlugin目錄：如果有多個插件的話規范整理

src/myPlugin/audio_wave目錄：當前要封裝的組件

 3.app.vue本地調試該組件，直至沒有問題

 4.修改src/myPlugin/audio_wave/index.js 文件，目的：將該組件作為 Vue 插件

// audioWave 插件對應組件的名字
import audioWave from './audio_wave.vue';

// Vue.js 的插件應當有一個公開方法 install 。第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象
// 參考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
// 此處注意，組件需要添加name屬性，代表注冊的組件名稱，也可以修改成其他的

audioWave.install = Vue => Vue.component(audioWave.name, audioWave);//注冊組件
export default audioWave;

此處需要注意的是 install。 Vue的插件必須提供一個公開方法 install，該方法會在你使用該插件，也就是 Vue.use(yourPlugin)時被調用。這樣也就給 Vue全局注入了你的所有的組件。

5. 修改配置項

（1）修改 webpack.config.js ，修改完成后執行npm run build 看下是否生效

// 執行環境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

module.exports = {
  // 根據不同的執行環境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/sumFunction/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'audio_wave.js',
    library: 'audio_wave', // 指定的就是你使用require時的模塊名
    libraryTarget: 'umd', // 指定輸出格式
    umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
  },

　　library：指定的就是你使用require時的模塊名

　　libraryTarget：為了支持多種使用場景，我們需要選擇合適的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。顯而易見，我們應該選擇 UMD 格式。

　　有時我們想開發一個庫，如lodash，underscore這些工具庫，這些庫既可以用commonjs和amd方式使用也可以用script方式引入。

　　這時候我們需要借助library和libraryTarget，我們只需要用ES6來編寫代碼，編譯成通用的UMD就交給webpack了

　　 umdNamedDefine：會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define

　　

　　（2）修改package.json 文件：

// 發布開源因此需要將這個字段改為 false
"private": false,

// 這個指 import 的時候它會去檢索的路徑
"main": "dist/audio_wave.js",

6.提交發布

（1）在npm官網注冊賬號，地址：https://www.npmjs.com/，注冊好之后，注意郵箱要驗證，會發送驗證鏈接到你的注冊郵箱，沒有驗證的話是不能發布代碼的

（2）package.json 中 author 盡量與 npm 賬戶一致

（3）項目根目錄下，打包之后，登錄npm賬號，輸入用戶名、密碼、郵箱，npm publish發布

npm run build
npm login
npm publish

7.現在其他項目可以安裝引用了

npm install audio_wave_plugin --save

//main.js中引入
import audioWave from 'audio_wave_plugin'
Vue.use(audioWave)

8.npm包更新迭代方法

（1）新建npm包：

npm login
npm publish

（2）已有npm包，在已有npm包基礎上更新版本

npm version <update_type>
npm publish

　　update_type 有三個參數：第一個是patch,  第二個是minor,第三個是 major

     　　patch：這個是補丁的意思，補丁最合適；

     　　minor：這個是小修小改；

     　　major：這個是大改咯；

　　比如原來版本1.0.0

• 　　npm version patch  //修改為1.0.1
• 　　npm version minor  //修改為1.1.0
• 　　npm version major //修改為2.0.0 

 

封裝過程中出現一些問題，現記錄如下：

1.其他項目引用時候，main.js中Vue.use()時候報錯Uncaught TypeError: Cannot read property ‘toLowerCase‘ of undefined，原因：

源代碼中index.js 中注冊的組件需要有name屬性，代表注冊的組件名稱；import的文件是vue文件；