文章是网上参考而来
1.写自己的npm包一定要注册自己的npm账号
2.创建自己的npm包
i.在自己的目录下进行npm init
name：
包的名字，默认是你这个文件夹的名字。先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 要取的名字，如果没有报错，npm上没有跟你同名的包，把包发布出去。如果成功下载下来了，则不能发布。
version：
你这个包的版本，默认是1.0.0
description：
包的作用
entry point：
入口文件，默认是Index.js，你也可以自己填写你自己的文件名
test command：
测试命令，这个直接回车就好了，因为目前还不需要这个。
git repository：
这个是git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。
keyword：
这个是一个重点，这个关系到有多少人会搜到你的npm包。
author：写你的账号或者你的github账号吧
license：这个直接回车，开源文件来着。。。
ii.建立src文件夹，并建立index.js
注意目录结构入下
-package.json
-package-lock.json
-src/index.js
-node_module[如果没有引入包等就不会产生该文件夹]
iii.我们写a+b的代码
在index文件中写入代码
function add (num1, num2) {
num1 = parseFloat(num1)
num2 = parseFloat(num2)
return num1 + num2
}
module.exports = add;
iiii.最重要的，写好README.md，大家知道该包的作用
3.登陆发布包
i登陆
npm login
或者使用添加npm用户
npm adduser
按照提示输入自己的用户名和密码
ii发布包
然后，在你的目录下使用npm publish
npm publish
注意：每一次发布新的一版，version版本要改变，不然npm会给我报错。一般情况下，一旦你要修改你已经发布后的代码，然后又要执行发布操作，务必到package.json里面，把version改一下，比如从1.0.0改为1.0.1，然后在执行npm publish，这样就可以成功发布了
从零发布vue包，vue-cli不限
我使用的4.5.13的
第一步：使用 vue init webpack-simple h5-select-multiple 初始化项目
h5-select-multiple修改成自己项目名称。
初始完项目，按照提示输入项目信息即可，然后 npm install , npm run dev 让项目跑起来，如下图：
第二步：修改文件目录
1.在src目录下新建components文件夹，然后在此文件夹下建立Main.vue文件
Main.vue 名字也可以是其他，我们写的这个组件就是放在该文件里面，之前的App.vue是用于本地开发，测试用的入口文件，也就是用于 npm run dev 的入口文件。
2.在webpack.config.js同级目录（也是该组件的根目录）下新建 index.js文件， index.js是把select-multiple.vue文件暴露出去的出口。
修改完之后的文件目录如下，标红的就是新增的内容：
第三步：修改文件内容，配置
1.编写select-multiple.vue 组件
2.把编写的select-multiple.vue 组件引入App.vue中进行测试开发
3.index.js内容如下：
import Main from './src/components/select-multiple'
// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('yyl-npm-practice', Main)
}
//这样就可以使用Vue.use进行全局安装了。
Main.install = function(Vue){
Vue.component(Main.name, Main)
}
export default Main
import Main from './src/components/Main'
4.修改package.json
package.json需要修改private字段(private是true的时候不能发布到npm,需设置成false)； 并增加main字段， main字段是require方法可以通过这个配置找到入口文件，这输入模块加载规范，具体可以参考 这里， 主要内内容截图如下：
修改完package.json如下，标红的就是新增和改变的属性。
"private": false, // 因为组件包是公用的，所以private为false
"main": "./dist/h5-select-multiple.js", // 采用commonJs入口文件，如果不配置，我们在其他项目中就不用import XX from XX来引用了，只能以包名作为起点来指定相对的路径
5.修改过的 webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
// entry: './src/main.js',
entry: process.env.NODE_ENV === 'production'?"./index.js":'./src/main.js', // 入口文
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "h5-select-multiple.js", // 生成的文件名
library: "h5-select-multiple", // 指定的就是你使用require时的模块名
libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
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)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.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
})
])
}else {
module.exports.devtool = '#eval-source-map'
}
修改地方：module.exports
entry
entry: process.env.NODE_ENV === 'production'?"./index.js":'./src/main.js', // 入口文件
output
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "h5-select-multiple.js", // 生成的文件名
library: "h5-select-multiple", // 指定的就是你使用require时的模块名
libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
生产环境的时候， 我们就不调试了，也不想要这个.map文件，那就先把这个 devtool删了
devtool
// devtool: '#eval-source-map' // 删除或注释
修改地方：if (process.env.NODE_ENV === 'production')
//module.exports.devtool = '#source-map' //删除或注释件
在if后面加
else {
module.exports.devtool = '#eval-source-map'
}
npm run build
6.修改index.html的js引用路径，因为我们修改了output 的 filename，所以引用文件的名字也得变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>h5-select-multiple</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/h5-select-multiple.js"></script>
</body>
</html>
npm run dev 让项目跑起来，我们在App.vue里面调用该组件，并做测试，调试。
第四步： 发布到npm
1.在该组件根目录下的终端（就是 平常输入 npm run dev的地方），运行npm login，会提示输入个人信息，Email是发布成功后，自动给这个邮箱发送一个邮件，通知发布成功，输入完，登录成功。
2.最后就可以发布了， npm publish, 如下，发布成功(每次发布的时候packa.json 里面的 version不能一样，不然不能发布出去，手动改下版本就行)
发布失败的话，根据提示百度解决。
去自己的npm上点击Packages ，就能看到发布的包
使用方法 ：
1.组件内部使用
html:
<selectMultiple />
js：
import selectMultiple from 'h5-select-multiple'
components: {
selectMultiple
}
2. main.js 全局安装：
import selectMultiple from 'h5-select-multiple'
Vue.use(selectMultiple )
然后在其他.vue文件里面，直接使用组件 <h5-select-multiple/> 即可
3.直接引用打包后的 h5-select-multiple.js
这种方式就不需要webpack这类的构建工具，跟jquery的方式差不多，可以直接页面引用，使用方法示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<h5-select-multiple></h5-select-multiple>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/h5-select-multiple.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
}
},
methods: {
}
}) </script>
</body>
</html>
采坑记录：
1.在webpack.config.js里设置 resolve（比如 设置@做为根目录 ）， 开发环境没问题，生产环境就用不了了，所以大家就用平常的相对路径类吧，虽然麻烦了点。
2.图片生产环境不能用，解决方法可以把图片转成base64, 可以用这个 在线图片转base64,或者把图片放在网上，引用图片的网上资源路径。
3.字体图标在生产环境也用不了，如果用到了字体图标，就别把字体图标的资源打包进去了，引用该组件的时候，需要再引用字体图标的资源。
后来发现其实图片和字体图标也可一起打包到js里面，需要用到 url-loader 把limit参数设置大点就行，这样就可以把图片，字体图标也都打包到js里面了，这样使用的时候，就不用单独引用这些静态资源了， 代码如下：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]?[hash]',
limit: 99999
}
},
{
test: /\.(svg|ttf|eot|woff|woff2)$/,
loader: 'url-loader',
options:{
name:'[name].[ext]',
limit: 9999999
}
}
想看源码的话，只要在自己项目里 npm install h5-select-multiple 就可以在 node_modules 下找到了。
喜欢的话点赞收藏关注，不定时发布更多文章。
