You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
4.2 KiB

4 months ago
  1. ## Explanation of Build Files
  2. | | UMD | CommonJS | ES Module |
  3. | --- | --- | --- | --- |
  4. | **Full** | vue.js | vue.common.js | vue.esm.js |
  5. | **Runtime-only** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
  6. | **Full (production)** | vue.min.js | | |
  7. | **Runtime-only (production)** | vue.runtime.min.js | | |
  8. ### Terms
  9. - **Full**: builds that contain both the compiler and the runtime.
  10. - **Compiler**: code that is responsible for compiling template strings into JavaScript render functions.
  11. - **Runtime**: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
  12. - **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue](https://unpkg.com/vue) is the Runtime + Compiler UMD build (`vue.js`).
  13. - **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue.runtime.common.js`).
  14. - **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: ES module builds are intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [rollup](http://rollupjs.org/). The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue.runtime.esm.js`).
  15. ### Runtime + Compiler vs. Runtime-only
  16. If you need to compile templates on the fly (e.g. passing a string to the `template` option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build.
  17. When using `vue-loader` or `vueify`, templates inside `*.vue` files are compiled into JavaScript at build time. You don't really need the compiler in the final bundle, and can therefore, use the runtime-only build.
  18. Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you wish to use the full build instead, you need to configure an alias in your bundler.
  19. #### Webpack
  20. ``` js
  21. module.exports = {
  22. // ...
  23. resolve: {
  24. alias: {
  25. 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
  26. }
  27. }
  28. }
  29. ```
  30. #### Rollup
  31. ``` js
  32. const alias = require('rollup-plugin-alias')
  33. rollup({
  34. // ...
  35. plugins: [
  36. alias({
  37. 'vue': 'vue/dist/vue.esm.js'
  38. })
  39. ]
  40. })
  41. ```
  42. #### Browserify
  43. Add to your project's `package.json`:
  44. ``` js
  45. {
  46. // ...
  47. "browser": {
  48. "vue": "vue/dist/vue.common.js"
  49. }
  50. }
  51. ```
  52. ### Development vs. Production Mode
  53. Development/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.
  54. CommonJS and ES Module builds are intended for bundlers, therefore we don't provide minified versions for them. You will be responsible for minifying the final bundle yourself.
  55. CommonJS and ES Module builds also preserve raw checks for `process.env.NODE_ENV` to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing `process.env.NODE_ENV` with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.
  56. #### Webpack
  57. Use Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
  58. ``` js
  59. var webpack = require('webpack')
  60. module.exports = {
  61. // ...
  62. plugins: [
  63. // ...
  64. new webpack.DefinePlugin({
  65. 'process.env.NODE_ENV': JSON.stringify('production')
  66. })
  67. ]
  68. }
  69. ```
  70. #### Rollup
  71. Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):
  72. ``` js
  73. const replace = require('rollup-plugin-replace')
  74. rollup({
  75. // ...
  76. plugins: [
  77. replace({
  78. 'process.env.NODE_ENV': JSON.stringify('production')
  79. })
  80. ]
  81. }).then(...)
  82. ```
  83. #### Browserify
  84. Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle.
  85. ``` bash
  86. NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
  87. ```