封装一个方便在 vue 里面使用的webSQL的插件

需求

先理清需求，然后才好有个目标。

数据库的初始化

数据库嘛，必然需要一个初始化的过程，首先要建库建表，添加初始数据，然后才方便使用。
如果数据库还没打开，表也没有建立，那么怎么添加数据呢？

而在vue里面时候做初始化的地方是在main.js，而在main.js里面，一般都是使用插件的形式，比如Vuex等。

那么我们也可以模仿一下，把webSQL的管理类库做成插件的形式，然后顺便在npm上面发个包。这样便于做版本管理。

统一版本

因为有几个项目里面都使用了这个类库，于是统一版本就成了问题，一个地方改了，其他地方怎么办？代码不同意是很头疼滴。所以需要发到npm上面。

可以发包的项目

因为要在npm上面发包，所以项目结构需要改一下。

项目结构

• example
  就是把 src 改成 example，好吧，我也不知道为啥要这么改，反正通关攻略是这么写的。
  然后要改一下vue.config.js，这样项目才能正常启动。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-web-storage/'
    : '/',
  // 将 examples 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

• packages
  这个是存放要发包的代码。这里打算做三种操作类库，分别是indexedDB、webSQL和localstrorage。因为每个类库都比较小，做成三个包有点浪费的感觉，所以就放在一起了。

建立三个单独的文件夹，index.js是主函数，install是放插件的函数。

根文件夹的index.js是把这三个给包装起来。打包好像只能对一个js文件进行打包。

import webSQLVue from './vue-webSQL/install'
import webSQLHelp from './vue-webSQL/index'

export { 
  webSQLVue, // 在main里面安装的插件
  webSQLHelp // 直接使用封装函数
}

大概这样做就可以。这里做了两个类，一个是vue的插件，一个是原生的封装类。两个都提供，原因用哪个就用哪个吧。

• .npmignore
  npm 的配置文件，类似于 .gitignore 文件，就是排除掉不需要发包的文件。

.DS_Store
node_modules/
examples/
packages/
public/
.gitee/
vue.config.js
babel.config.js
*.map
*.html
run.bat

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

• package.json
  需要在这里设置发包的各种说明，包括包名、版本、描述、版权协议（开源协议）、作者等。
  每次发布都有改一下版本号，版本号对应不上也是会报错滴。

{
  "name": "vue-web-storage",
  "version": "0.1.0",
  "description": "基于 Promise 对indexedDB、webSQL进行封装，做成vue3的插件，便于使用。",
  "main": "lib/vue-web-storage.umd.js",
  "private": false,
  "license": "MIT",
  "auther": "jin yang (jyk) [email protected]",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name vue-web-storage --dest lib packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在npm 上面发布项目

首先要注册一个账号，然后验证邮箱，在然后查一下是否重名。然后就是踩坑之旅。

首先要在本地打包，然后登录npm发包。

打包

还记得 package.json 里面的那个 lib开头的吗？那个就是打包用的，所以我们可以 yarn lib 进行打包。

如果顺利的话，就是这样：

打包

这里生成的文件，就是package.json 里面 main对应的文件。

登录 npm

如果没有账号的话，需要到 npmjs.com （https://www.npmjs.com/） 上面注册一个，还是挺方便的，然后 用 npm login 登录

修改仓库

发包的时候要改回原来的地址
npm config set registry http://registry.npmjs.org

发完包再改成淘宝的镜像地址。
npm config set registry https://registry.npm.taobao.org

发布

npm publish

如果一切顺利的话，就可以发布成功了。

如果不顺利报错了的话，那就问问度娘。

新账号只能发一个包，如果想发第二个包的话，需要做账号的转换。

（网络有点卡，还没转完）

参考

https://www.cnblogs.com/wisewrong/p/10186611.html

源码

https://gitee.com/naturefw/nf-web-storage
[图片上传失败...(image-acf924-1618663476994)]