Vue不同版本文档说明

以下内容翻译自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

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}
````

#### Rollup

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

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

Browserify

添加到项目的 package.json:

{
  // ...
  "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:

var webpack = require('webpack')

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

Rollup

使用 rollup-plugin-replace:

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

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

Browserify

将全局 envify 应用于构建工具

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