vue-plugin

Appearance

目录

npm包调试 ​

前端我们有一个 vue-plugin包，要怎么调试呢？ 并不是一直在发布包到 npm 私服仓库的， 一般是本地调试的没什么问题，再发布的

以vue-plugin为例

截止到 2023-12-21 ， vue-plugin （v2.11.1-beta.0）核心关键配置包如下

"webpack": "^3.6.0",
"element-ui": "^2.15.14",
"vue": "^2.7.15",

后续可能有有变动，有较大出入，会持续更新改调试文档

使用 node 版本 v14.21.3 进行调试， npm 或者yarn 都行

操作步骤 ​

  1. vue-plugin 目录安装依赖
npm i
  1. 运行打包命令

因为webpack 将代码进行了压缩，如果要看日志，请 注释掉 如下内容;

否则一打包，日志都被webpack插件删除了，代码也压缩了，无法调试

build/webpack.config.js

js
new UglifyJSPlugin({
    compress: {
        warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
        drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
        collapse_vars: true, // 内嵌定义了但是只用到一次的变量
        reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
        pure_funcs:['console.log','console.info','console.table']
    },
    output: {
        beautify: false, // 最紧凑的输出
        comments: false // 删除所有的注释
    }
}),
shell
npm run build

此时会得到 打包后的 产物 lib

  1. 使用 npm link

在 vue-plugin 仓库目录， 执行 npm link

npm link的作用是将 vue-plugin打包的内容 生成一个 软连接， 注册到 全局的 npm 的 node_modules

  1. 在项目中， 比如 oa
shell
npm uninstall vue-plugin

npm link vue-plugin

以上步骤做完，仅仅是将 本地的 vue-plugin 仓库与 oa 业务仓库联系起来了

现在随便改点vue-plugin里面的内容， 然后重新执行 vue-plugin的 npm run build 打包， oa 业务代码就能感知到vue-plugin内容的变化

也就是改一点东西，简单 npm run build 要有一个打包的过程

最后：

调试完成后，如果确实要改动 vue-plguin, 则需要更新npm 包的版本 ----> 发布vue-plugin包 ----> 业务代码升级vue-plugin

QA ​

1. 为什么不能直接在业务代码（oa）引入vue-plugin的src里面的代码 ​

不建议直接在 oa里面 去引入 vue-plugin 的具体的业务代码 element-ui 可以， 但是 vue-plugin不太行。

因为 sass这个东西语法每个版本不一样， 业务里面可能已经是 webpack5+sass， 但是 vue-plugin里面的 sass写法又是老的， 特别是 deep语法， 导致无法直接编译通过， 编译报错

还有 jsx， 业务仓库（oa等）可能没有配置 jsx的编译支持（babel-loader）， 业务大部分都是 template写法， 但是 vue-plugin 又有 jsx语法， 导致以业务代码的 webpack无法识别这种vue-plugin里面的源码， 也会编译报错

2. 为什么页面上会有莫名其妙的 undefined ​

这是因为 业务代码跟 vue-plugin 里面 vue版本不一致的问题， webpack 在编译的时候有点小毛病， 需要统一业务代码的vue版本号， 一般是 2.7.14 , vue2的最后一个版本