Vue2.5.9源码解读(2) — build/config.js

const banner =
'/*!\n' +
' * Vue.js v' + version + '\n' +
' * (c) 2014-' + new Date().getFullYear() + ' Evan You\n' +
' * Released under the MIT License.\n' +
' */'

在生成的文件中添加的vuejs版本、版权、许可声明信息。

// 为一些路径起别名
const aliases = {
vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
compiler: resolve('src/compiler'),
core: resolve('src/core'),
shared: resolve('src/shared'),
web: resolve('src/platforms/web'),
weex: resolve('src/platforms/weex'),
server: resolve('src/server'),
entries: resolve('src/entries'),      // 2.5.9版本中已经不存在这个目录，只是别名模块中还存在[不影响]
sfc: resolve('src/sfc')
};
// 判断别名对象中是否存在传入参数的第一个元素对应的键值
const resolve = p => {
// 将传入字符串参数分割成数组，并取出第一个元素
const base = p.split('/')[0]
// 如果别名对象中存在第一个元素对应的键值,则返回的路径为别名对应值与参数除第一个元素外的字符串组成的全路径，参看示例1。
if (aliases[base]) {
return path.resolve(aliases[base], p.slice(base.length + 1))
}
// 否则，返回值为当前目录的上一级路径与参数组成的全路径，参看示例2。
else {
return path.resolve(__dirname, '../', p)
}
}
// 示例
1. resolve('web/entry-runtime-with-compiler.js'); => [vue-2.5.9/]src/platforms/web/entry-runtime-with-compiler.js
2. resolve('dist/vue.js'); => [vue-2.5.9/]/dist/vue.js

resolve主要是为了方便操作路径。

// 可以认为是编译的对象的配置，源码中都有对每个对象的注释
const builds = {
// 只运行时(CommonJS). 使用bundlers，如Webpack、Browserify
'web-runtime-cjs': ...,
// 运行时+编译 CommonJS构建(CommonJS)
'web-full-cjs': ...,
// 只运行时(ES Modules). 使用支持ES Modules的bundler，如Rollup、Webpack2
'web-runtime-esm': ...,
// 运行时+编译 ES Modules构建(ES Modules)
'web-full-esm': ...,
// 只运行时，开发环境构建(Browser)
'web-runtime-dev': ...,
// 只运行时，生产环境构建(Browser)
'web-runtime-prod': ...,
// 运行时+编译 开发环境构建(Browser)
'web-full-dev': ...,
// 运行时+编译 生产环境构建(Browser)
'web-full-prod': ...,
// web平台 编译(CommonJS)
'web-compiler': ...,
// web平台 编译(Browser)
'web-compiler-browser': ...,
// web平台服务端渲染(CommonJS)
'web-server-renderer': ...,
// web平台服务端渲染(UMD)
'web-server-basic-renderer': ...,
// web平台服务端渲染(CommonJS)，使用webpack server插件
'web-server-renderer-webpack-server-plugin': ...,
// web平台服务端渲染(CommonJS)，使用webpack client插件
'web-server-renderer-webpack-client-plugin': ...,
// weex平台 运行时 factory (CommonJS)
'weex-factory': ...,
// weex平台 运行时 framework (CommonJS)
'weex-framework': ...,
// weex平台 编译 (CommonJS)。使用weex的webpack装载器
'weex-compiler': ...
};
// 根据不同的process.env.TARGET生成不同的配置
function genConfig (name) {
const opts = builds[name]
const config = {
input: opts.entry,
external: opts.external,
plugins: [
replace({
__WEEX__: !!opts.weex,
__WEEX_VERSION__: weexVersion,
__VERSION__: version
}),
flow(),
buble(),
alias(Object.assign({}, aliases, opts.alias))
].concat(opts.plugins || []),
output: {
file: opts.dest,
format: opts.format,
banner: opts.banner,
name: opts.moduleName || 'Vue'
}
}
// 如果有配置env，则修改config.plugins中的process.env.NODE_ENV的值为配置的env值
if (opts.env) {
config.plugins.push(replace({
'process.env.NODE_ENV': JSON.stringify(opts.env)
}))
}
// 为config定义一个_name属性，属性值为enumerable和value
Object.defineProperty(config, '_name', {
enumerable: false,  // 不可枚举
value: name
})

return config
}

genConfig根据指定的process.env.TARGET与builds中的键做对比，如果在builds中存在对应的键，则生成并对应的配置。这里并没有做指定的process.env.TARGET不存在于builds中的处理。

if (process.env.TARGET) {
module.exports = genConfig(process.env.TARGET)
} else {
exports.getBuild = genConfig
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

如果指定了process.env.TARGET，则按指定的导出；否则提供getBuild和getAllBuilds方法。