Vue.js 源码构建

Vue.js 源码是基于 Rollup（ https://github.com/rollup/rollup ）  构建的，它的构建相关配置都在 scripts ⽬录下

 

1、构建脚本

        

     通常⼀个基于 NPM 托管的项⽬都会有⼀个 package.json ⽂件，它是对项⽬的描述⽂件，它的内容实际上是⼀个标准的 JSON 对象。

我们通常会配置 script 字段作为 NPM 的执⾏脚本， Vue.js 源码构建的脚本如下：

        

{ 
    "script": { 
        "build": "node scripts/build.js", 
        build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",             
        "build:weex": "npm run build --weex" 
    } 
}

这⾥总共有 3 条命令，作⽤都是构建 Vue.js ，后⾯ 2 条是在第⼀条命令的基础上，添加⼀些环境参数。

当在命令⾏运⾏ npm run build 的时候，实际上就会执⾏ node scripts/build.js ，接下来我们

来看看它实际是怎么构建的。

 

2、构建过程

     

先打开构建的⼊⼝ JS ⽂件，在 scripts/build.js 中

        

let builds = require('./config').getAllBuilds() // filter builds via command line arg 
if (process.argv[2]) {
	const filters = process.argv[2].split(',') builds = builds.filter(b = >{
		return filters.some(f = >b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)
	})
} else { // filter out weex builds by default 
  builds = builds.filter(b => { return b.output.file.indexOf('weex') === -1 }) }
build(builds)
	

先从配置⽂件读取配置，再通过命令⾏参数对构建配置做过滤，这样就可以

构建出不同⽤途的 Vue.js 了。接下来我们看⼀下配置⽂件，在 scripts/config.js 中：

        

const builds = { // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify 
	'web-runtime-cjs': {
		entry: resolve('web/entry-runtime.js'),
		dest: resolve('dist/vue.runtime.common.js'),
		format: 'cjs',
		banner
	},
	// Runtime+compiler CommonJS build (CommonJS) 
	'web-full-cjs': {
		entry: resolve('web/entry-runtime-with-compiler.js'),
		dest: resolve('dist/vue.common.js'),
		format: 'cjs',
		alias: {
			he: './entity-decoder'
		},
		banner
	},
	// Runtime only (ES Modules). Used by bundlers that support ES Modules, // e.g. Rollup & Webpack 2 
	'web-runtime-esm': {
		entry: resolve('web/entry-runtime.js'),
		dest: resolve('dist/vue.runtime.esm.js'),
		format: 'es',
		banner
	},
	// Runtime+compiler CommonJS build (ES Modules) 
	'web-full-esm': {
		entry: resolve('web/entry-runtime-with-compiler.js'),
		dest: resolve('dist/vue.esm.js'),
		format: 'es',
		alias: {
			he: './entity-decoder'
		},
		banner
	},
	// runtime-only build (Browser)
	'web-runtime-dev': {
		entry: resolve('web/entry-runtime.js'),
		dest: resolve('dist/vue.runtime.js'),
		format: 'umd',
		env: 'development',
		banner
	},
	// runtime-only production build (Browser)
	'web-runtime-prod': {
		entry: resolve('web/entry-runtime.js'),
		dest: resolve('dist/vue.runtime.min.js'),
		format: 'umd',
		env: 'production',
		banner 14
	},
	// Runtime+compiler development build (Browser) 
	'web-full-dev': {
		entry: resolve('web/entry-runtime-with-compiler.js'),
		dest: resolve('dist/vue.js'),
		format: 'umd',
		env: 'development',
		alias: {
			he: './entity-decoder'
		},
		banner
	},
	// Runtime+compiler production build (Browser) 
	'web-full-prod': {
		entry: resolve('web/entry-runtime-with-compiler.js'),
		dest: resolve('dist/vue.min.js'),
		format: 'umd',
		env: 'production',
		alias: {
			he: './entity-decoder'
		},
		banner
	},
	// ... }`
	

其中 entry 属性表⽰构建的⼊⼝ JS ⽂件地

址， dest 属性表⽰构建后的 JS ⽂件地址。 format 属性表⽰构建的格式， cjs 表⽰构建出来的

⽂件遵循 CommonJS 规范， es 表⽰构建出来的⽂件遵循 ES Module 规范。 umd 表⽰构建出来的⽂

件遵循 UMD 规范。