qq_41206257的博客

代码覆盖率工具 Istanbul 入门教程代码覆盖率的 4 个纬度行覆盖率：是否每一行都执行了？函数覆盖率：是否每个函数都调用了？分支覆盖率: 是否每个代码块都执行了？语句覆盖率：是否每个语句都执行了使用npm install istanbul 使用istanbul cover命令，就能得到覆盖率$ istanbul cover simple.js===== Coverage summary =====Statements : 75% ( 3/4 )Branches

MochaMocha是现在最流行的 Javascript 测试框架之一。在 Node 和浏览器环境都可以使用使用npm install mocha --global测试脚本的写法所谓"测试脚本"，就是用来测试源码的脚本。// add.jsfunction add(x, y) { return x + y;}module.exports = add;// add.test.js// add.test.jsvar add = require('./add.js');var

概述Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。Rollup 对代码模块使用 ES6 模块系统，ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码(tree-shaking)。ES6 模块最终还是要由浏览器原生实现(浏览器ESM)，但当前 Rollup 可以使你提前体验。Tree-shaking除了使用 ES6 模块之外，Rollup 还静态分析代码中的 import，并将排除任何未实

同步加载模块 JSfunction show(content) { window.document.getElementById("app").innerText = "Hello," + content;}// 通过 CommonJS 规范导出 show 函数module.exports = show;main.js 中引入import show from "./show";show("webpack");bundle.js(function (modules) { .

编写一个 loaderloader 是一个导出为一个函数的 node 模块本地测试方法可以通过简单的 rule 对象设置 path.resolve 指向这个本地文件module.exports = { //... module: { rules: [ { test: /\.js$/, use: [ { loader: path.resolve('path/to/loader.js'),

loader API所为 loader 只是一个到处为函数的 Javascript模块。webpack 内部会调用这个函数，然后把上一个 loader 产生的结果或者资源传进去。函数的 this 上下文将由 webpack 填充，并且 loader runner 具有一些有用方法，可以使 loader 改变为异步调用方式，或者获取 query 参数。第一个 loader 传入的参数只有一个，资源文件的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String

插件的构成一个插件由以下几个部分构成一个具名的 Javascript 函数在原型上定义 apply 方法指定一个触及到 webpack 本身的事件钩子操作 webpack 内部实例特定数据在实现功能之后调用webpack 提供的 Callbackapply 方法插件是由一个构造函数（此构造函数的 prototype 对象具有 apply 方法)所实例化出来的。这个 apply 方法在安装插件时，会被 webpack compilier 调用一次。apply 方法可以接收一个 webpck

Compilier 模块是 webpack 的支柱引擎。通过 cli 或者 NodeAPI 传递的所有选项，创建出一个 compikation 实例。扩展自 Tapable 类。大部分钩子可以通过类似的方法访问compiler.hooks.someHook.tap(/* ... */);watchingCompiler 支持可以监控文件系统的监听(watching)机制，并且在文件修改时重新编译。entryOption在 webpack 选项中的 entry 配置项 处理过之后，执行插件

Plugin API插件通过Tapable类来提供插件接口。这个类保留 tap,tabAsync 和 tabPromise 方法，可以使用这些方法注入自定义构建步骤。而这些步骤将在整个编译过程中的不同时机触发，通常需要结合compiler hooks和插件内部暴露出来的钩子使用tap 用于触发同步钩子，例如进入一次新的构建 - compile 阶段tabAsync和tabPromise用来触发异步钩子。如 启动编译钩子 - run自定义钩子可以为其他插件的编译添加一个新的钩子，来触及到这些插件

流程初始化：从配置文件或是shell读取与合并参数，得到最终参数，实例化插件new Plugin()开始编译：通过上一步初始化得到的最终参数，初始化一个Compiler对象，加载插件（依次调用插件中的apply方法），通过执行Compiler.run开始编译确定入口：根据配置中entry找出所有入口文件编译模块：从entry出发，调用配置的loader，对模块进行转换，同时找出模块依赖的模块（如何找？见下文），依次递归，直到所有依赖模块完成本步骤处理完成模块编译：这一步已经使用loader对所有

webpack版本v_5.54核心概念入口(entry)输出loader插件模式浏览器兼容性webpack 应该使用哪个模块作为构建依赖图的开始output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,如打包优化，注入文件通过选择

Mock.jsmock.js 是一款数据模拟生成器。可以独立于后端，自行构建返回数据。可用于前后端分离的开发模式和单元测试使用方式// 安装npm install mockjs// 使用var Mock = require('mockjs');var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }]});语法规范mock.js 的语法规范分为两部分：数据模板定义数据占位符定义数据模板定义

vue-cli安装npm install -g @vue/clivue --version 确定版本如果需要升级全局的 vue-cli 包，请运行：npm update -g @vue/cli想升级对应项目内的 vue-cli 相关模块，可以在确定项目中运行 upgrade [options] [plugin-name]快速原型开发安装 全局扩展： npm install -g @vue/cli-service-global运行 vue serve。 要求当前目录下有 main.js,

CordovaCordova是一个apache 开源的跨平台框架，可以使用前端语言来实现跨平台 app。- 属于第一代跨平台方案，现在用纯 Cordova 做 app 的很少，Hibird 中出现的较多- 页面渲染使用的是 webView，与原生交互的时候需要借助原生注入在 webView 的方法来交互。- H5 与原生的交互还可以使用原生拦截 webview 发出的请求（链接）来实现react-native，weex页面渲染调用原生的组件，组件标签会被编译为原生组件去渲染。但是发布，环境安装收

名词解释集成：在推送或者 merge 代码后自动进行构建打包交付：将上一步生成的代码包发布至测试、生产等环境需求在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。解决的问题在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。手动执行构建脚本消耗时间人力而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题工具选择gitlab/github/giteeJenki