解读常用的generator-react-webpack脚手架-2(webpack.config.js)

[ckinmind]

webpack.config.js

server.js中引入

'use strict';

const path = require('path');
const args = require('minimist')(process.argv.slice(2));

// List of allowed environments
const allowedEnvs = ['dev', 'dist', 'test'];

// Set the correct environment
let env;
if (args._.length > 0 && args._.indexOf('start') !== -1) {
  env = 'test';
} else if (args.env) {
  env = args.env;
} else {
  env = 'dev';
}
process.env.REACT_WEBPACK_ENV = env;

/**
 * Build the webpack configuration
 * @param  {String} wantedEnv The wanted environment
 * @return {Object} Webpack config
 */
function buildConfig(wantedEnv) {
  let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
  let validEnv = isValid ? wantedEnv : 'dev';
  let config = require(path.join(__dirname, 'cfg/' + validEnv));
  return config;
}

module.exports = buildConfig(env);

[ckinmind]

const path = require('path');

1. require('path')

• path是node.js中的一个模块，用于处理目录的对象，提高开发效
• 常用方法：
  • path.join():用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是”/“，Windows系统是”\“
  • path.resolve()用于将相对路径转为绝对路径
• 更多用法参考：node.js之path模块
• argv属性返回一个数组，由命令行执行脚本时的各个参数组成。它的第一个成员总是node，第二个成员是脚本文件名，其余成员是脚本文件的参数, 真正的参数实际上是从process.argv[2]开始

---

[ckinmind]

const args = require('minimist')(process.argv.slice(2));

1. process.argv.slice(2)

• process对象是Node的一个全局对象，提供当前Node进程的信息。
• 它可以在脚本的任意位置使用，不必通过require命令加载。该对象部署了EventEmitter接口
• process对象提供一系列属性，用于返回系统信息
  • process.argv：返回当前进程的命令行参数数组。
  • process.env：返回一个对象，成员为当前Shell的环境变量，比如process.env.HOME
  • process.pid：当前进程的进程号
  • ...

// 执行以下命令
node server.js --env=dev

//在server.js中打印出来
console.log(process.argv)；
//实际结果如下：
[ 
   '/usr/local/bin/node',
  '/Users/ckinmind/workspace/css-play/server.js',
  '--env=dev'
 ]

第一个是node, 第二个是脚本文件， 第三个才是参数

---

2. require('minimist')

• minimist是一个轻量级的命令行参数解析引擎
• node.js的命令行参数解析工具有很多，比如：argparse、optimist、yars、commander。optimist和yargs内部使用的解析引擎正是minimist，如果你喜欢轻量级的技术，那么minimist足够简单好用，代码量也很少（只有几百行），非常适合研读

 //打印上面的args的结果
{ _: [], env: 'dev' }

参考资料:minimist轻量级的命令行参数解析引擎

[ckinmind]

process.env.REACT_WEBPACK_ENV = env;

这里将当前的环境状态记录到了process.env.REACT_WEBPACK_ENV中, 这样全局都能读取到当前的环境状态，来对应的处理

• process.env属性返回一个对象，包含了当前Shell的所有环境变量。比如，process.env.HOME返回用户的主目录。
• 通常的做法是，新建一个环境变量NODE_ENV，用它确定当前所处的开发阶段，生产阶段设为production，开发阶段设为develop或staging，然后在脚本中读取process.env.NODE_ENV即可

[ckinmind]

 let config = require(path.join(__dirname, 'cfg/' + validEnv));

• 在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径
• path.join方法用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是”/“，Windows系统是”\“
• 这是实际的路径是加载： 项目/cfg/dev.js(假设是开发环境)