☀️一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情
☀️ 在日常的开发中，我们常会需要用到几个项目公用一个模块的需求，比如几个同类型的项目中，我需要用到同一个弹框，那么我首先需要将这个弹框做成一个组件，接下来呢？我是直接将写好的组件CV到每个项目中使用吗？在之前的开发中，我都是这么直接复制粘贴到每个项目的。
这样做的后果是什么呢：
- 每个模块都不是完美的，那么就会有更改的时候，每一次更改都需要将所以项目中的代码更新一遍，这样我们复制了多少份代码就要改变多少次，非常的麻烦，那么有没有一个只需要更改一次，所以项目中的同一个模块都能得到更改呢？
- 那就是npm包，我们可以通过上传到私有npm服务器，不断迭代npm包来更新管理所有项目的依赖。
☀️什么是npm
NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。npm是JavaScript运行时环境Node.js的默认包管理器。
2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费，截至2020年3月17日，npm为大约1200万开发人员提供了130万个软件包，这些开发人员每月下载这些软件包达750亿次。
☀️注册一个npm账号
想要发布一个npm的包，首先第一步需要注册一个npm的账号以便后续发包使用
☀️对项目初始化
安装好脚手架vue-cli,打开终端输入命令
$ npm install --global vue-cli #全局安装
这里封装vue的插件用webpack-simple，webpack-simple类似于webpack。笔者这边也跟随这参考文章用该工具，接着在终端进入需要创建项目的目录下，输入命令
$ vue init webpack-simple project-name #project-name为项目名，在这我的项目名为vue-mytoast
最终初始化了我们的项目，src目录下创建一个lib文件夹，里面存放需要开发的插件文件
在lib文件夹下创建一个toast.vue文件，使用如下的代码，并且创建一个toast.js文件使用install方法将组件挂载到原型上
<template>
<div class="vue-toast-wraper" v-show="isShowToast">
{{toastMsg}}
</div>
</template>
<script>
export default {
name: "vueToast",
data() {
return {
toastMsg: "登陆成功",
isShowToast:true
}
},
mounted() {
if (this.isShowToast) {
setTimeout(() => {
this.isShowToast = false;
},2500);
}
}
}
</script>
<style scoped>
.vue-toast-wraper{
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 17px;
padding: 10px;
border-radius:12px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 2000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
import Toast from './toast.vue'
const vueToast = {
install(Vue, options) {
Vue.component(Toast.name, Toast) //Toast.name 组件的name属性,也就是后面使用的组件名字
// 类似通过 this.$xxx方式调用插件，其实只是挂载到原型上而已
//Vue.prototype.$xxx //最终可以在任何地方通过 this.$XXX调用
}
}
//global情况下自动安装
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueToast)
}
export default vueToast
☀️创建文件并引入
总共创建了俩个文件，一个是vue一个是js，创建完成之后我们可以在main.js中引入进行查看当成组件显示的效果。
在main.js中全局引入，引入的方式和平时用全局组件的引入方法没有什么不同，其实本质上就是当做一个全局组件来使用，当用成npm包封装成一个独立的组件发布，那么其他引用该包的项目都能当成一个组件来使用它。
当在浏览器上显示组件已经成功的时候那么久可以了。
☀️配置发布文件
首先对package.json文件进行修改，这里说明几个参数： 1.private 该包是否为私有，私有的包只能自己使用，别人无法引用到
{
"name": "vue-mytoast",
"description": "vue弹窗提示插件",
"version": "1.0.0",
"author": "lwz",
"license": "MIT", //开源协议
"private": false, //（改） 因为组件包是公用的，所以private为false
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"main": "dist/toast.js", //（改）
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [ //（改） 指定关键字
"vue",
"toast"
],
"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",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
以下配置我们配置文件的出口和入口，修改webpack.config.js文件。
为了方便其他人通过script标签的方式引入，我们将libraryTarget改为umd模式，这样就可以有俩种引入组件的方法，一种是通过npm进行install安装，另一种就是同script进行直接引入。
var path = require('path')
var webpack = require('webpack')
// 执行环境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
// entry: './src/main.js',
// 根据不同的执行环境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/toast.js',
output: {
//修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: "toast.js", //指定最终打包成dist文件夹下的文件名
library: "vueToast", // 指定的就是你使用require时的模块名
libraryTarget: "umd", //libraryTarget会生成不同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
})
])
}
之后还要修改.gitignore 文件和index.js文件
.DS_Store
node_modules/
# dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-mytoast</title>
</head>
<body>
<div id="app"></div>
<!--<script src="/dist/build.js"></script>-->
<script src="/dist/toast.js"></script>
</body>
</html>
☀️打包过程
$ npm run build
$ npm pack
打包完会生成一个tgz的文件可以在本地当成测试包用，之后再发布
npm adduser
这里需要注册完npm账号输入账号密码，one-time需要在邮箱收到验证码
$ npm publish
登陆成功后进行 npm publish发布，到这里我们的第一个包就已经发布完成了，其他的人可以通过我们设置的包名进行install下载然后引入
本文参考了以下文章，跟着他一步一步完成了配置www.jianshu.com/p/b98d09609…
后续我们可以另开一个项目，然后通过npm install +包名 的方法直接下载到node_modules中，我们就已经把整个包都下载下来了，目录都是一样的
跟使用element等组件是一样的直接install后引入
在页面直接引用，就可以看到效果啦。
