Vue源码分析之-寻找入口文件

寻找构建入口文件

• 查看dist/vue.js的构建过程

执行构建

$ npm run dev
# "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
# --environment TARGET:web-full-dev" 这里是设置环境变量 TARGET

• scripts/config.js的执行过程
  • 作用：根据命令设置的参数，生成Rollup构建的配置文件
  • 使用环境变量：TARGET=web-full-dev

首先我们需要找到scripts/config.js对外导出的成员，一般在文件的末尾，我们检索文件中的exports，找到导出成员代码的位置，相关代码如下：

// 判断环境变量中是否有设置了 TARGET 
if (process.env.TARGET) {
  // 如果有则根据挡墙的TARGET值，使用genConfig()生成rollup配置文件
  module.exports = genConfig(process.env.TARGET)
} else {
  // 否则，获取全部配置
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

根据代码，我们可以看到这里调用了genConfig()，其函数定义如下：

function genConfig (name) {
  const opts = builds[name]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      flow(),
      alias(Object.assign({}, aliases, opts.alias))
    ].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    },
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }

  // built-in vars
  const vars = {
    __WEEX__: !!opts.weex,
    __WEEX_VERSION__: weexVersion,
    __VERSION__: version
  }
  // feature flags
  Object.keys(featureFlags).forEach(key => {
    vars[`process.env.${key}`] = featureFlags[key]
  })
  // build-specific env
  if (opts.env) {
    vars['process.env.NODE_ENV'] = JSON.stringify(opts.env)
  }
  config.plugins.push(replace(vars))

  if (opts.transpile !== false) {
    config.plugins.push(buble())
  }

  Object.defineProperty(config, '_name', {
    enumerable: false,
    value: name
  })

  return config
}

函数内部根据外部传进来的参数name，这里的name值就是我们在命令运行时设置的环境变量TARGET值，即 web-full-dev，通过buils[name]拿到一个opts，builds的定义其实是一个O