如何將本身的vue組件發佈爲npm包

vue 組件發佈爲 npm 包,分爲以下三個步驟

• [1] 建立 package 文件,裏邊包含了你要發佈包的一些信息(name/version 等)
• [2] 發佈 vue 包須要用到 webpack 打包/ es6 語法/vue 文件因此須要配置一下 webpack
• [3] 註冊 npm 帳號,發佈本身的 vue 組件

github 項目地址

一.建立 package.json 文件

在官網給了一個最基礎的 npm 包的 package.json 配置文件以下

{
    "name": "my_package",    //發佈npm包的名字
    "description": "",      //對組件的描述
    "version": "1.0.0",     //版本號
    "main": "index.js",     //定義了包的入口文件
    "scripts": {
      "test": ""
    },
    "repository": {
      "type": "git",
      "url": ""            //輸入git的地址
    },
    "keywords": [],        //關鍵字,方便別人搜索
    "author": "",         //做者本身的名字
    "license": "ISC",
    "bugs": {
      "url": ""            //方便別人給你提issue的地址
    },
    "homepage": ""         //能夠指向本身的github地址
  }

官網地址 creating-a-package-json-file

二.配置 webpack 打包 vue 組件和解析文件

2.1 在上邊 package.json 的基礎上咱們須要添加devDependencies 字段和 dependencies字段,用來添加項目開發依賴和項目依賴

{
  "name": "heyushuo-toast",
  "version": "1.0.0",
  "description": "彈窗組件",
  "main": "dist/toast.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --display-error-details --config webpack.config.js"
  },
  "author": "heyushuo",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "https://github.com/heyushuo/npm-package"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.9.4",
    "sass": "^1.14.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue": "^2.5.9",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "vuex": "^3.0.1",
    "webpack": "^3.9.1",
    "webpack-dev-server": "^2.9.5"
  },
  "dependencies": {
    "axios": "^0.18.0"
  }
}

當用戶在下載你的包的時候,devDependencies 字段下依賴包並不會下載,dependencies 字段是必須安裝的依賴

2.2 此時咱們須要安裝依賴包

npm install

2.3 根目錄下新增 webpack.config.js 文件,並添加配置

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: "./src/index.js", //入口文件，就是在src目錄下的index.js文件，
  output: {
    path: path.resolve(__dirname, "./dist"), //輸出路徑dist目錄
    publicPath: "/dist/",
    filename: "toast.min.js", //打包後輸出的文件名字,這裏須要和package.json文件下main應該寫爲:'dist/toast.min.js'
    libraryTarget: "umd",
    // 　libraryTarget：爲了支持多種使用場景，咱們須要選擇合適的打包格式。libraryTarget 屬性。這是能夠控制 library 如何以不一樣方式暴露的選項。
    umdNamedDefine: true
  },
  //這裏咱們能夠剔除掉一些通用包,本身的包不打包這些類庫,須要用戶環境來提供
  externals: {
    vue: "vue",
    axios: "axios"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "scss-loader"
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" //babel的相關配置在.babelrc文件裏
      },
      {
        test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
        loader: "url-loader",
        query: {
          limit: 30000 //把一些小圖片打包爲base64
        }
      }
    ]
  },
  plugins: [
    //壓縮js代碼
    new webpack.optimize.UglifyJsPlugin({
      //輸出不顯示警告
      compress: {
        warnings: false //默認值
      },
      //輸出去掉註釋
      output: {
        comments: false //默認值
      }
    })
  ]
};

umdNamedDefine

2.4 開始開發本身的組件了

在 src 目錄下建立一個 index.js 最爲 webpack 的入口文件,建立一個 component 文件寫本身的組件,common 放一些公用樣式或者文件

在 index.js 文件引入寫好的組件,並導出組件

import toast from "./component/index.vue";
export default toast;

接下來能夠執行以下命令,生成須要發佈包的文件

npm run build

//這裏打包後的文件與package.json文件內的main字段相對應

"main": "dist/toast.min.js",

到這裏第二部就算完成了,你們也能夠把本身平時寫的組件所有複製過來就能夠.

接下來就是最重要的一步註冊 npm 包,發佈本身的包

三.建立 npm 帳號以及發佈流程

1. 首先須要在 npm 建立一個帳號
2. 在終端執行 npm login 輸入你註冊的 npm 的帳號和密碼
3. 發佈你的包

這裏須要注意:必定要確保本地鏡像爲 npm,否則沒法提交成功

// 1.查詢當前配置的鏡像
npm get registry
//https://registry.npmjs.org/
// 設置成淘寶鏡像
npm config set registry http://registry.npm.taobao.org/
// 換成原來的
npm config set registry https://registry.npmjs.org/

npm 發佈包的一些相關命令

npm login           //登陸npm
npm publish         //發佈包
npm unpublish       //刪除包

再發布前須要配置.npmignore 文件,忽略一些無用的文件

.*
/node_modules
/src
package-lock.json
webpack.config.js

以下圖看一下具體執行的過程

以上就完成了發佈本身的包