blog
blog copied to clipboard
huangshuwei
🈲黄书伟的个人博客
### 前言 很多情况下，我们还是需要支持 IE 的。vue-cli 3 打包支持IE 和 vue-cli 稍有差异。 ### 回顾vue-cli 2 打包支持IE **babel 配置** ``` // babel.config.js module.exports = { presets: [ ["@vue/app", { "useBuiltIns": "entry" } ],...
### 前言 编写单元测试用例时，难免频繁的执行单元测试命令。正所谓“工欲善其事，必先利其器”，这里推荐一块 vs code jest 单元测试插件 ### 安装 1、通过浏览器点击安装 [安装地址](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) 2、vs code 插件市场搜索。插件名称： “Jest Runner” ，插件id:"firsttris.vscode-jest-runner" ### 使用 使用非常简单，随便打开一个你在编写的用例文件。 **方法1：** 每个用例上面都会有 “Run | Debug”提示。“Run”代表只运行用例，但不测试；“Debug”代表运行并且测试用例。 效果如下：  **方法2：** 在用例代码区域右键菜单，能够看到 “Debug...
### 前言 jest moduleNameMapper 配置，允许将模块路径映射到其他模块。如果通过 webpack 配置了 externals 项，那么需要通过 jest moduleNameMapper 和 webpack externals 做一层映射关系。 缺示例，待完善
### 前言 单元测试已经成为前端开发必备技能，下面使用[vue-test-utils](https://github.com/vuejs/vue-test-utils)进行 vue 单元测试。 ### 目录结构 ``` ├─build ├─src ├─package.json ├─.babelrc ├─.eslintrc ├─jest.config.js └─test └─unit │ ├─coverage │ └─specs *.spec.js ``` ### 安装依赖 **vue-test-utils** Vue Test Utils 是 Vue.js...
### 前言 列举下，一个组件库需要具备的特点。 ### 文档 - 目录清晰 - 功能点介绍详尽 - 示例丰富 & 在线编辑 ### 安装 - yarn & npm 安装 & 按需安装 - CDN 直接使用 ### 国际化 - 内置主流的语言包 -...
### 前言 看到标题，你的第一反应应该是“这不是很简单吗？官网说的很清楚！”。没错，的确很简单，但是你如果想让你的组件上手更简单，还是需要做些小手脚的。 ### 假设开发一个单文件 table 组件 ``` this is a table comp. export default { name: "VTable" }; ``` ### 通过 Vue.component 注册 `Vue.component(id,Object|Function)` 接收2个参数。第一个参数为公共组件的id,此处可以使用公共组件名称。第二个参数为构造器类型数据，此处可以为组件。 注册上述 table 组件 ```...
### 前言 `externals` 对于封装组件库，或者工具库非常有用。它可以防止将某些需要`import`的资源打包到输出文件中，而是在运行时再去从外部获取扩展依赖。具体参考[官方文档](https://webpack.docschina.org/configuration/externals/) ### 好处 **打包体积小很多** 假设我们封装基于 vue 的组件库，很难避免使用vue 的原型对象（prototype）。但是这样会将 vue 源码打包进去，如果配置了 `externals`，打包后的体积将会小很多。 ### 使用`externals` 的条件 外部 library 可以下是下面任何一种形式： - root：可以通过一个全局变量访问 library（例如，通过 script 标签） - commonjs：可以将 library 作为一个 CommonJS...
### 前言 打包组件库或者工具库时，我们会将 vue、react、angular 排除打包文件外，而是希望用户使用时自己安装。这时就需要 `peerDependencies`了。 > 只有在发布库文件时才会用到 ### 各种 dependencies 的比较 - dependencies 生产环境需要的依赖包。比如 deepmerge、lodash 等 - devDependencies 开发环境时需要的依赖包。比如webpack 插件、node 插件、gulp 插件等 - peerDependencies 你通过`externals`排除在打包库文件之外的依赖。比如 vue、react、angular ### peerDependencies **作用**...
### 前言 总结下在vue 中使用 jsx 的技巧。 ### jsx 绑定事件 默认jsx 中绑定事件的语法为 onXx。如： ``` // child comp ... name:"child-comp" mounted:{ this.emit("valueChange",args) } ... ``` 绑定子组件的事件 ``` // parent comp ... methods:{...
### 前言 刚通过[sinopia](https://github.com/rlidwka/sinopia) 去搭建私有包管理器，并记录了过程：[通过sinopia搭建私有的包管理器](https://github.com/huangshuwei/blog/issues/14)，就发现了[verdaccio](https://github.com/verdaccio/verdaccio)，有更好的当然去尝试，下面我将记录自己的配置过程。 ### verdaccio 介绍 官方的介绍（不翻译了）： - It's a web app based on Node.js - It's a private npm registry - It's a local network proxy - It's...