Vue插件开发小记

背景

公司有统一的微信公众号登录服务，需要给前端封装此功能，以便各项目使用。由于公司移动端项目采用的 Vue 技术栈，所以决定将微信公众号登录的功能以 Vue 插件的形式提供出去。
将开发过程中一些值得记录的点记下来，此功能实现的代码很简单，就不放出来了。
假设该插件的名字是 vue-wx-login。

初始化项目

通过 Vue CLI 脚手架搭建项目：

1
2
3

vue create vue-wx-login
cd vue-wx-login
yarn

以上操作会在本地新建一个名叫 vue-wx-login 的文件夹。

模块配置

由于模块最终目的是要导出 Vue 插件，因此需要更改一下构建目标 | Vue CLI。同时，要指定正确的模块入口。
package.json 作出如下修改：

{
	“scripts”: {
	  “build”: “cross-env NODE_ENV=production vue-cli-service build --target lib --name wxLogin ./src/index.js"
	},
	“main”: “dist/wxLogin.common.js”
}

--name wxLogin ./src/index.js
指定模块名称，以及构建时的入口文件。

“main”: “dist/wxLogin.common.js”
vue-cli 的构建产物文件夹默认是 dist ，可通过 vue.config.js 更改。这里指定模块的入口文件是一个给打包器用的 CommonJS 包。

根据Vue vs. JS/TS 入口文件文档，由于我们将 .js 文件作为入口文件，并且没有任何具名导出，同时希望直接暴露默认导出。
需要在 vue.config.js 中添加以下 webpack 配置。

module.exports = {
	configureWebpack: {
    output: {
      libraryExport: ‘default’
    }
  }
}

本地调试

开发 npm 模块的时候，除了在模块本身的工程内进行调试，还有一个更重要的调试环节就是在真实的项目中进行引用和调试。
比较笨的方法是模块更改一次便重新发布，然后项目更新模块版本。这种办法除了比较蠢以外，还有以下缺点： - 手动操作，耗时费力 - 模块增加了很多垃圾版本号
npm 官方针对该问题，提供了npm link 解决方案。
非常简单，只需要两个步骤：

// 进入模块文件夹
cd vue-wx-login
npm link
// 进入项目文件夹
cd your-project
npm link vue-wx-login

注意：npm link vue-wx-login 这里 link 的是模块名称，也就是 package.json 中的 name 字段的值，而不是模块的文件夹名称。
也可以简化为一个步骤：

1 2	cd your-project npm link path/to/vue-wx-login

这种方式 link 的是模块的相对路径，而不是包名称

在调试过程中，可以先将模块的 main 字段改为 ./src/index.js ，而不是打包之后的入口。这么做的好处是，可以在模块修改之后，实时映射到项目文件夹。否则，每次模块改动都需要构建。
经过以上步骤之后，项目中就增加了该模块的依赖，可以正常引用该模块了。

发布模块

调试没问题之后，准备发布模块至 npm 。

npm unlink

在发布模块之前，首先要先将之前通过 npm link 创建的链接解除：
第一步：

1 2	cd your-project npm unlink —no-save <module_name>

第二步：

1 2	cd vue-wx-login npm unlink

发布

首先将 package.json 中的 main 字段恢复成 dist/wxLogin.common.js。
然后在 package.json 的 scripts 字段增加一个命令：

1	“prepublishOnly”: “npm run build”

意思是在模块发布之前，执行构建命令。参照该文档
如果需要将模块发布至公司私有仓库，执行以下几个步骤： - 设置仓库地址：npm config set registry https://xxxx.xxx.xxx - npm login ，根据提示完成登录 - 更改模块名称，增加公司约定的 scope。参照该文档
发布模块： 1. 更改版本号 2. 执行发布命令：npm publish
至此，模块就发布成功了 👏👏。

Web Developer