源碼共讀-UMI-2

接上一個博客源碼共讀-UMI-1，接下來，我們來繼續執行 umi build
從上一個博客中我們知道，執行umi build 會執行lib/scripts/ 下面對應的js文件，即此處爲build.js

lib/scripts/build.js

import chalk from 'chalk';
import yParser from 'yargs-parser';
import build from '../build';
const argv = yParser(process.argv.slice(2));

//回顧
[require.resolve(`../lib/scripts/${script}`)].concat(args),

yargs-parser取出命令行參數，如

umi build abc --xiaohu=haha --bcd=123

argv = { _: [ 'abc' ], xiaohu: 'haha', bcd: 123 }

build({
  plugins: argv.plugins ? argv.plugins.split(',') : [],
}).catch(e => {
  console.error(chalk.red(`Build failed: ${e.message}`));
  console.log(e);
});

執行build。
注，這裏取得是argv.plugins的值，但是我執行了很多種情況的命令，都沒有plugins這個值。

/lib/build.js

import buildDevOpts from './buildDevOpts';

引入buildDevOpts，用於配置開發環境所需要的option。

process.env.NODE_ENV = 'production';

設置環境變量

export default function(opts = {}) {
  return require('umi-build-dev/lib/build').default(
    buildDevOpts({
      ...opts,
      hash: true,
    }),
  );
}

這裏傳入的opts={ plugins: [] }
buildDevOpts將會返回如下對象

{ 
    cwd: undefined,
  babel: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\babel',
  extraResolveModules:
   [ 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\node_modules' ],
  libraryAlias:
   { dynamic: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\dynamic.js',
     link: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\link.js',
     navlink: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\navlink.js',
     redirect: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\redirect.js',
     router: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\router.js',
     withRouter: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\withRouter.js',
     _renderRoutes: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\renderRoutes.js',
     _createHistory: 'C:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\umi\\lib\\createHistory.js' },
  hash: true,
  plugins: [] }

/lib/buildDevOpts

import { resolve } from 'path';

const debug = require('debug')('umi:devDevOpts');

export default function(opts = {}) {
  const { extraResolveModules, hash } = opts;
  debug(`opts: ${JSON.stringify(opts)}`);
  delete opts.extraResolveModules;

  return {
    cwd: process.env.APP_ROOT,
    // eslint-disable-line
    babel: resolve(__dirname, './babel'),
    extraResolveModules: [
      ...(extraResolveModules || []),
      resolve(__dirname, '../../node_modules'),
    ],
    libraryAlias: {
      dynamic: require.resolve('./dynamic'),
      link: require.resolve('./link'),
      navlink: require.resolve('./navlink'),
      redirect: require.resolve('./redirect'),
      router: require.resolve('./router'),
      withRouter: require.resolve('./withRouter'),
      _renderRoutes: require.resolve('./renderRoutes'),
      _createHistory: require.resolve('./createHistory'),
    },
    hash,
    ...opts,
  };
}

當執行umi build時，這裏opts={plugins: [],hash: true}
在這裏組裝成開發環境中需要的option

本節課就到此結束了，喜歡我的博客的朋友可以關注我。後續會有實戰演練哦。
Github地址
https://github.com/xiaohuoni/source-code-co-reading-umi

感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_