npm 建立賬號
首先問題：開發中我們往往需要做某些功能，這個功能可能會出現很多次，也會出現在不同的項目。需要使用時候又不想重新寫，怎么辦呢？
解決思路：把這個特殊的需求功能做成屬于自己的組件，當下次需要去使用它的時候。那么我們就可以打包這個組件并上傳到npm管理庫，這個庫可以是自己的私有庫，也可以是npmjs公共庫。
一、初始化一個空項目
1、新建一個文件夾，然后進入到該文件夾目錄下，執行
npm init
初始化項目。然后會讓你填一些項目相關的信息，跟著提示填就是了。沒啥說的。注意name不要和現有的其他npm包重名了，不然一會兒發Npm包的時候會失敗，可以先去npmjs.com搜一下有沒有重名的。
這一步完成后，目錄下會生成package.json文件。
2、由于本教程是發布一個vue的組件包，而且使用了es6和webpack，所以在devDependencies字段中，應該至少加入對應的依賴，可以參考我這個配置name 為npm包的名稱，一定不能跟別人的重復，可以自己去npmjs.com 上面檢查下是否重復，否則提交不成功的
main 自己定義的程序的入口文件，比如我希望打包后是 dist/helloWorld.js。private 要設置為 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、執行npm install，下載這些依賴包。
4、項目根目錄下創建2個文件夾：dist 和 src，名字按照個人習慣可以變動。我習慣使用dist代表發布的目錄，src是開發目錄。dist文件夾里的js是到時候通過webpack打包后的文件。待會只會提交dist目錄到npm官網上，src不提交。
src里，我們創建一個常規的vue組件。hello-world.vue 內容大致如下：
<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>
接下來我們還需要創建一個js文件。index.js 內容如下（這里的寫法主要是把這個組件 export 出去）：
import helloWorld from './hello-world.vue'
export default helloWorld;
5、接下來配置 webpack 打包，把src中的內容打包進 dist 目錄內：
根目錄下新增 webpack.config.js 大致內容如下：
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',//打包之后的名稱
library: 'helloWorld', // 指定的就是你使用require時的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 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
})
])
}
然后執行npm run build，就會在dist目錄下生成helloWorld.js。這個js即是我們這個npm包的主文件。
6、新建一個文件，名為.npmignore，是不需要發布到npm的文件和文件夾，規則和.gitignore一樣。如果你的項目底下有.gitignore但是沒有.npmignore，那么會使用.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
至此，一個npm組件包就做完了，剩下的，只是提交到npm官網去。
(如果要嚴謹點，當然還需要加入單元測試通過后再發包。。。但是。。。但是。。。
）
二、發布到NPM上的流程
1、前提，得有個npm賬號，沒有就新注冊一個賬號
https://www.npmjs.com/signup
2、進入到項目的根目錄下，運行 npm login 執行登錄
一般情況下回提示你輸入 你的用戶名，密碼和郵箱，若登錄成功一般會顯示：
`Logged in as` 你的名字 `on https://registry.npmjs.org/`.
3、登錄成功后就可以執行 npm publish 即可將這個npm包發布到npm官網。大概過個10來分鐘就可以搜索到并下載，我們執行npm install hello-world --save-dev 即可在自己的項目中import導入進來當做組件使用了。
4、更新包的時候，需要手動修改 package.json 中的version版本號，一般慣例都是+1，比如1.0.0 --> 1.0.1。更改完成后，分別執行打包、登錄npm、發布即可。
npm run build
npm login
npm publ
