以下内容翻译自Vue dist 目录下英文文档,旨在理解 Vue 在不同情况下引用的版本区别,对于 Vue 的应用和理解有一定帮助。

构建文档说明

UMD CommonJS ES Module
Full vue.js vue.common.js vue.esm.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Full (production) vue.min.js - -
Runtime-only (production) vue.runtime.min.js - -

术语

  • Full: 独立构建方式,包含编译器和运行时。

  • Compiler: 负责将模板编译器编译成Javascript渲染函数的代码。

  • Runtime: 负责创建Vue实例的代码,渲染和修补Virtual DOM等。基本上等于除去编译器的所有东西。

  • UMD: UMD构建可以在浏览器中通过<script>标签直接引用。Unpkg CDN上默认导出的文件就是Runtime+Compiler UMD 构建的vue.js

  • CommonJS: CommonJS 构建旨在于诸如 browserify 或者 webpack 1较旧版本的构建工具一起使用。使用这些构建工具默认导出的文件是CommonJS运行时构建(vue.runtime.common.js)。

  • ES Module: ES模块构建适用于像 webpack 2 或者 rollup这样的现代构建工具。这些现代构建工具的默认导出文件是仅ES模块运行时构建(vue.runtime.esm.js)。

独立构建 vs. 运行时构建

如果你需要即时编译模板(例如,将字符串传递给template选项,或者使用其内部HTML作为模板进行安装),则需要编译器从而完成构建。

当使用 vue-loader 或者 vueify 时, *.vue 文件中的模板会在构建时被编译成Javascript,在最终的打包文件中不需要编译器,因此使用运行时构建版本即可。

由于运行时构建版本比独立构建(包含编译器)轻约30%,所以你可以随时使用它。如果你希望使用独立构建版本,你需要在构建工具中单独配置别名。

Webpack

1
2
3
4
5
6
7
8
9
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
`

Rollup

1
2
3
4
5
6
7
8
9
10
const alias = require('rollup-plugin-alias')

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

Browserify

添加到项目的 package.json:

1
2
3
4
5
6
{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}

开发环境 vs. 生产环境模式

开发/生产模式对于 UMD 构建版本来说是硬编码的方式:未被压缩的文件用于开发时使用,被压缩的文件用于生产环境使用。

CommonJS 以及 ES 模块构建版本适用于构建工具,因此我们不提供压缩的版本。你需要自己来生成最后的压缩版本。

CommonJS 和 ES 模块构建版本还保留了对于process.env.NODE_ENV的原生检查,以确定它们的运行模式。你应该在构建工具中进行合理的配置,以便控制 Vue 将运行的模式。使用字符串替换 process.env.NODE_ENV 还允许像UglifyJS这样的分类符完全删除仅在开发模式下的代码块,减小最终文件的体积。

Webpack

使用 Webpack的 DefinePlugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
var webpack = require('webpack')

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

Rollup

使用 rollup-plugin-replace:

1
2
3
4
5
6
7
8
9
10
const replace = require('rollup-plugin-replace')

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

Browserify

将全局 envify 应用于构建工具

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