Vue插件开发4-插件的打包与引用

2021-01-13 Vue插件 PV:

Vue插件的打包

还是犯了一个最基础的错误，本来插件打包Vue-CLI官网给出了说明，而我还在苦苦百度。百度上的教程都是几年前的，全是照搬一套。

具体过程就是：

按照Vue插件开发1-插件原理即应用编写一个插件。
使用命令vue-cli-service build --target lib --name myLib [entry]
1. myLib就是你的插件名字，主要是JS文件的命名。
2. [entry]是你的文件入口文件，即导出install函数文件
执行该命令就会生成打包完成的js文件。

dist/drag-window.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)
dist/drag-window.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包
dist/drag-window.umd.min.js：压缩后的 UMD 构建版本
dist/drag-window.css：提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)
js.map：source map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时source map文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！

npm插件的上传

npm其实就是一个仓库。与git一样，我们使用npm install xxx的时候实际上是把其仓库中的xxx文件夹下载到本地。并再到node_modules中，我就可以直接使用import xxx from xxx的语法引入插件，实际上与我们在src下新建一个文件夹lib，然后使用import xxx from ./lib/xxx.js效果一样。

所以我们只需要

在npm注册一个npm账号。

然后新建一个文件夹使用npm init 初始化一个package.js文件。

{
  "name": "drag-window",
  "version": "0.0.21",
  "description": "A plugin  creating a drag window",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "darg",
    "window\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D\u001b[D"
  ],
  "author": "mw530",
  "license": "MIT"
}

这是一个最基本的样板，关键是private: true，然后把main.js设为生成的那个js文件。

在命令行使用npm adduser将自己的用户添加上去。
使用npm publish上传自己的文件。

注意：其中一个点是仓库必须切换为官方仓库，不能为淘宝仓库。

官方仓库：npm config set registry=http://registry.npmjs.org
淘宝仓库：npm install -g cnpm –registry=https://registry.npm.taobao.org;

插件的引用

与Vue插件开发1-插件原理即应用的使用一样，只是引入的地址直接写插件命即可，如import xxx from 'xxx'。然后使用Vue.use(xxx)。

注意样式表文件需全局直接import xxx/aaa.css，如果在<style>使用了使用了scope属性，则其样式表只在对应组件起效，如果不加，则会全局影响。