轉(zhuǎn)自：http://auan.cn/internet/2026.html
首先問(wèn)題：開(kāi)發(fā)中我們往往需要做某些功能崭添，這個(gè)功能可能會(huì)出現(xiàn)很多次震叙，也會(huì)出現(xiàn)在不同的項(xiàng)目。需要使用時(shí)候又不想重新寫(xiě)昔期，怎么辦呢骂远？
解決思路：把這個(gè)特殊的需求功能做成屬于自己的組件，當(dāng)下次需要去使用它的時(shí)候。那么我們就可以打包這個(gè)組件并上傳到npm管理庫(kù)巢音，這個(gè)庫(kù)可以是自己的私有庫(kù)遵倦，也可以是npmjs公共庫(kù)。
一官撼、初始化一個(gè)空項(xiàng)目
1梧躺、新建一個(gè)文件夾，然后進(jìn)入到該文件夾目錄下傲绣，執(zhí)行
npm init
初始化項(xiàng)目燥狰。然后會(huì)讓你填一些項(xiàng)目相關(guān)的信息，跟著提示填就是了斜筐。沒(méi)啥說(shuō)的龙致。注意name不要和現(xiàn)有的其他npm包重名了，不然一會(huì)兒發(fā)Npm包的時(shí)候會(huì)失敗顷链，可以先去npmjs.com搜一下有沒(méi)有重名的目代。
這一步完成后，目錄下會(huì)生成package.json文件嗤练。
2榛了、由于本教程是發(fā)布一個(gè)vue的組件包，而且使用了es6和webpack煞抬，所以在devDependencies字段中霜大，應(yīng)該至少加入對(duì)應(yīng)的依賴，可以參考我這個(gè)配置name 為npm包的名稱(chēng)革答，一定不能跟別人的重復(fù)战坤，可以自己去npmjs.com 上面檢查下是否重復(fù)，否則提交不成功的
main 自己定義的程序的入口文件残拐，比如我希望打包后是 dist/helloWorld.js途茫。private 要設(shè)置為 false
{
"name": "hello-world",
"description": "",
"version": "1.0.0",
"author": "十三月",
"license": "MIT",
"private": false,
"main": "dist/helloWorld.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"
},
"dependencies": {
"vue": "^2.5.11"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.12.0",
"webpack-dev-server": ">=3.4.1"
}
}
具體這些依賴都有什么用處自己查查就明白了。
3溪食、執(zhí)行npm install囊卜，下載這些依賴包。
4错沃、項(xiàng)目根目錄下創(chuàng)建2個(gè)文件夾：dist 和 src栅组，名字按照個(gè)人習(xí)慣可以變動(dòng)。我習(xí)慣使用dist代表發(fā)布的目錄枢析，src是開(kāi)發(fā)目錄玉掸。dist文件夾里的js是到時(shí)候通過(guò)webpack打包后的文件。待會(huì)只會(huì)提交dist目錄到npm官網(wǎng)上登疗，src不提交排截。
src里嫌蚤，我們創(chuàng)建一個(gè)常規(guī)的vue組件。hello-world.vue 內(nèi)容大致如下：
<template>
<div>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "hello-world",
components: {},
props: {
name: {
type: String,
default: ''
}
},
data() {
return {}
},
mounted() {
},
methods: {},
destroyed() {
}
}
</script>
<style scoped>
</style>
接下來(lái)我們還需要?jiǎng)?chuàng)建一個(gè)js文件断傲。index.js 內(nèi)容如下（這里的寫(xiě)法主要是把這個(gè)組件 export 出去）：
import helloWorld from './hello-world.vue'
export default helloWorld;
5脱吱、接下來(lái)配置 webpack 打包，把src中的內(nèi)容打包進(jìn) dist 目錄內(nèi)：
根目錄下新增 webpack.config.js 大致內(nèi)容如下：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),//輸出路徑认罩，就是上步驟中新建的dist目錄
publicPath: '/dist/',//路徑
filename: 'helloWorld.js',//打包之后的名稱(chēng)
library: 'helloWorld', // 指定的就是你使用require時(shí)的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 會(huì)對(duì) UMD 的構(gòu)建過(guò)程中的 AMD 模塊進(jìn)行命名箱蝠。否則就使用匿名的 define
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
然后執(zhí)行npm run build，就會(huì)在dist目錄下生成helloWorld.js垦垂。這個(gè)js即是我們這個(gè)npm包的主文件宦搬。
6、新建一個(gè)文件劫拗，名為.npmignore间校，是不需要發(fā)布到npm的文件和文件夾，規(guī)則和.gitignore一樣页慷。如果你的項(xiàng)目底下有.gitignore但是沒(méi)有.npmignore憔足，那么會(huì)使用.gitignore里面的配置。大致可以參考我的.npmignore
.DS_Store
node_modules/
dist/
build/
npm-debug.log
yarn-error.log
package-lock.json
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
至此酒繁，一個(gè)npm組件包就做完了滓彰，剩下的，只是提交到npm官網(wǎng)去州袒。
）
二毕籽、發(fā)布到NPM上的流程
1抬闯、前提，得有個(gè)npm賬號(hào)关筒，沒(méi)有就新注冊(cè)一個(gè)賬號(hào)
https://www.npmjs.com/signup
2溶握、進(jìn)入到項(xiàng)目的根目錄下，運(yùn)行 npm login 執(zhí)行登錄
一般情況下回提示你輸入 你的用戶名蒸播，密碼和郵箱睡榆，若登錄成功一般會(huì)顯示：
`Logged in as` 你的名字 `on https://registry.npmjs.org/`.
3萍肆、登錄成功后就可以執(zhí)行 npm publish 即可將這個(gè)npm包發(fā)布到npm官網(wǎng)。大概過(guò)個(gè)10來(lái)分鐘就可以搜索到并下載胀屿，我們執(zhí)行npm install hello-world --save-dev 即可在自己的項(xiàng)目中import導(dǎo)入進(jìn)來(lái)當(dāng)做組件使用了塘揣。
4、更新包的時(shí)候宿崭，需要手動(dòng)修改 package.json 中的version版本號(hào)亲铡，一般慣例都是+1，比如1.0.0 --> 1.0.1葡兑。更改完成后奖蔓，分別執(zhí)行打包、登錄npm讹堤、發(fā)布即可吆鹤。
npm run build
npm login
npm publish
關(guān)于版本號(hào)和標(biāo)簽
npm包的版本號(hào)遵循著一定的規(guī)范，比如1.5.2這個(gè)版本號(hào)洲守，其中1是主版本號(hào)(major version)疑务，5是次版本號(hào)(minor version)，而 2是補(bǔ)丁版本號(hào)(patch version)岖沛，主要用來(lái)bug修復(fù)的更新等暑始。在包管理的時(shí)候遵循對(duì)應(yīng)語(yǔ)義的版本號(hào)更新，便于后續(xù)維護(hù)婴削。
同時(shí)廊镜，在發(fā)布一個(gè)新版本的時(shí)候，還可以使用打標(biāo)簽的方式進(jìn)行標(biāo)記唉俗，如：
npm publish --tag beta
npm publish --tag bugfix
如果你的包是已經(jīng)發(fā)布過(guò)了嗤朴，還可以對(duì)指定的版本號(hào)進(jìn)行打標(biāo)簽:
npm dist-tag add npm-test@1.0.0 [stable]
三、一般問(wèn)題
1虫溜、發(fā)包時(shí)提示name名錯(cuò)誤雹姊，name名稱(chēng)不能有大寫(xiě)字母，一般建議小寫(xiě)字母加中橫線連接
2衡楞、【該條非轉(zhuǎn)自上述鏈接吱雏，自行總結(jié)】：打包好的文件，不能直接放在src下引入哦瘾境！比如我將打包好的js叫做Helloword.js歧杏，放在和main.js同級(jí)，然后在main.js中引入迷守，這種做法是無(wú)效的哦犬绒，會(huì)報(bào)undefined，親測(cè)無(wú)效哦兑凿！ 從npm中引入可以的凯力。 放在static下作為靜態(tài)資源在html文件中引入<script>應(yīng)該可以（未測(cè)試）
3茵瘾、
四、我的第一個(gè)npm
該條非轉(zhuǎn)自上述鏈接咐鹤，自己的練習(xí)
