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 賬號以及發布流程
- 首先需要在 npm 創建一個賬號
- 在終端執行 npm login 輸入你注冊的 npm 的賬號和密碼
- 發布你的包
這里需要注意:一定要確保本地鏡像為 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
如下圖看一下具體執行的過程
以上就完成了發布自己的包