学习Vue构建和产物分析

A丹
2 阅读5分钟

NPM SCRIPT

  • 默认测试脚本流程：

    • 使用 ESLint 进行代码检查（lint） ：ESLint 是一个流行的 JavaScript 和 TypeScript 代码检查工具，用于发现和修复代码中的潜在问题，如语法错误、代码风格问题等，确保代码的一致性和质量。
    • 使用 Flow 进行类型检查（type check） ：Flow 是一个静态类型检查器，用于检查 JavaScript 代码中的类型错误，帮助开发者在编译阶段发现潜在的类型相关问题。
    • 执行单元测试并生成覆盖率报告（unit tests with coverage） ：单元测试是对代码中最小可测试单元（如函数、类等）进行的测试，确保每个单元的功能正常。覆盖率报告则显示了测试代码覆盖了多少生产代码，有助于评估测试的完整性。
    • 执行端到端测试（e2e tests） ：端到端测试模拟用户在实际应用中的操作流程，从用户界面到后端服务进行全面测试，确保整个系统的功能正常。

  • 提交 PR 前的要求：

    • 开发者在提交拉取请求（PR）之前，需要确保默认测试脚本中的所有步骤都能成功通过。这是为了保证提交的代码质量，减少 CI 服务器上出现测试失败的可能性。
    • 虽然 CI 服务器会对 PR 进行相同的测试，但建议开发者在本地先运行这些测试，这样可以提前发现并解决问题，提高开发效率。

dist文件夹分析

构建文件说明
构建格式UMDCommonJSES 模块
完整版vue.jsvue.common.jsvue.esm.js
仅运行时版vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js
完整版（生产环境）vue.min.js
仅运行时版（生产环境）vue.runtime.min.js
术语解释
  • 完整版：包含编译器和运行时的构建版本。
  • 编译器：负责将模板字符串编译成 JavaScript 渲染函数的代码。
  • 运行时：负责创建 Vue 实例、渲染和修补虚拟 DOM 等操作的代码。基本上包含除编译器之外的所有内容。
  • UMD：UMD 构建版本可以通过 <script> 标签直接在浏览器中使用。从 Unpkg CDN（unpkg.com/vue）获取的默认文件是运行时 + 编译器的 UMD 构建版本（vue.js）。
  • CommonJS：CommonJS 构建版本适用于像 Browserify 或 Webpack 1 这样的旧打包工具。这些打包工具的默认文件（pkg.main）是仅运行时的 CommonJS 构建版本（vue.runtime.common.js）。
  • ES 模块：ES 模块构建版本适用于像 Webpack 2 或 Rollup 这样的现代打包工具。这些打包工具的默认文件（pkg.module）是仅运行时的 ES 模块构建版本（vue.runtime.esm.js）。
运行时 + 编译器版与仅运行时版

如果需要动态编译模板（例如，将字符串传递给 template 选项，或者将元素的 DOM 内 HTML 作为模板进行挂载），则需要使用编译器，因此要选择完整版。

使用 vue-loader 或 vueify 时，.vue 文件中的模板会在构建时编译成 JavaScript。最终的打包文件中实际上不需要编译器，因此可以使用仅运行时版。

由于仅运行时版的构建文件比完整版轻约 30%，所以应尽可能使用仅运行时版。如果希望使用完整版，则需要在打包工具中配置别名。

Webpack

javascript

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // Webpack 1 使用 'vue/dist/vue.common.js'
    }
  }
}
Rollup

javascript

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})
Browserify

在项目的 package.json 中添加以下内容：

json

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}
开发环境与生产环境

UMD 构建版本对开发环境和生产环境进行了硬编码：未压缩的文件用于开发环境，压缩后的文件用于生产环境。

CommonJS 和 ES 模块构建版本是为打包工具设计的，因此我们没有为它们提供压缩版本。你需要自己对最终的打包文件进行压缩。

CommonJS 和 ES 模块构建版本还保留了对 process.env.NODE_ENV 的原始检查，以确定它们应该运行的模式。你应该使用适当的打包工具配置来替换这些环境变量，以便控制 Vue 运行的模式。用字符串字面量替换 process.env.NODE_ENV 还可以让像 UglifyJS 这样的压缩工具完全删除仅用于开发环境的代码块，从而减小最终文件的大小。

Webpack

使用 Webpack 的 DefinePlugin：

javascript

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}
Rollup

使用 rollup-plugin-replace：

javascript

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)
Browserify

对打包文件应用全局的 envify 转换：

bash

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

作用

这段文档主要是为了帮助开发者理解 Vue.js 不同构建文件的特点、适用场景以及如何在不同的打包工具和环境中正确使用它们。具体作用如下：

  1. 构建文件选择指导：详细介绍了不同构建格式（UMD、CommonJS、ES 模块）和版本（完整版、仅运行时版、开发环境版、生产环境版）的特点和用途，帮助开发者根据项目需求选择合适的构建文件。
  2. 打包工具配置说明：针对不同的打包工具（Webpack、Rollup、Browserify），提供了如何配置别名以使用完整版构建文件的示例，以及如何配置环境变量以控制 Vue 运行模式的示例，方便开发者在不同的项目中正确配置打包工具。
  3. 性能优化建议：强调了仅运行时版构建文件的优势，并建议开发者在可能的情况下使用该版本，以减小最终打包文件的大小，提高应用性能。
  4. 环境变量处理：解释了如何在不同的打包工具中处理 process.env.NODE_ENV 环境变量，以确保 Vue 在开发环境和生产环境中正确运行，并通过删除仅用于开发环境的代码块来优化最终文件大小。
avatar
文章
阅读
粉丝