startapp.js

#! /usr/bin/env node const path = require('path'); const { spawn } = require('child_process'); const { getEnv } = require('./util'); Const runtimePath = process.cwd(); // Run the command const runtimePath = process.cwd(); // startapp.js const codePath = __dirname; CMD or ctbuild.sh path const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep); // ctbuild. CMD or ctbuild.sh path const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep); // Let configPath; let define; /** * corssenvTask * @access private * @return {Promise} */ function corssenvTask() { return new Promise((resolve, reject) => { const command = process.platform === 'win32' ? `cross-env.cmd` : `cross-env`; const crossenvProcess = spawn(command, ['REAP_PATH=dev', 'NODE_ENV=development'], { cwd: codePath, encoding: 'utf-8', env: getEnv(commandPath), }); crossenvProcess.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); crossenvProcess.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); Crossenvprocess. on('close', (code) => {console.log(' crossenvClose: ${code} '); resolve(); }); }); } /** * webpackServiceTask * @return {Promise} */ function webpackServiceTask() { return new Promise((resolve, reject) => { const command = process.platform === 'win32' ? `webpack-dev-server.cmd` : `webpack-dev-server`; const babelProcess = spawn( command, [ '--open', '--config', path.join('webpackconfig', 'webpack.dev.js'), '--progress', '--colors', '--runtimepath', path.join(runtimePath, path.sep), '--customconfig', configPath, '--define', define.join(' '), ], { cwd: codePath, encoding: 'utf-8', env: getEnv(commandPath), }, ); babelProcess.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); babelProcess.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); Babelprocess. on('close', (code) => {console.log(' webpackServiceTaskClose: ${code} '); resolve(); }); }); } // StartApp tasks const tasks = [corssenvTask, webpackServiceTask]; let index = 0; /** * loopTask * @return {Promise} */ function loopTask() { return new Promise((resolve, reject) => { if (index >= tasks.length) { resolve(); } else { const task = tasks[index++]; if (task) { task() .then(() => { loopTask().then(() => { resolve(); }); }) .catch((error) => { reject(error); }); } else { reject(); }}}); } module.exports = {/** * build * @param {String} -ctBuildConfigPath * ctbuild.config.js config file path, Js file */ build: ({config: ctbuildConfigPath = "", define: defineMap }) => { if (ctbuildConfigPath) { if (path.isAbsolute(ctbuildConfigPath)) { configPath = ctbuildConfigPath; } else { configPath = path.join(runtimePath, ctbuildConfigPath); } } else { configPath = path.join(runtimePath, 'ctbuild.config.js'); } define = defineMap; loopTask() .then(() => { console.log('finish'); process.exit(); }) .catch((error) => { console.log(error); }); }}; / function getEvnSplit() {return process.platform === 'win32'? '; ':' : '; } /** * getEnv * @param commandPath */ getEnv(commandPath) {const obj = {}; if (process.env && process.env.Path && process.env.Path.indexOf(commandPath) === -1) { obj.Path = process.env.Path + getEvnSplit() + commandPath; } if (process.env && process.env.PATH && process.env.PATH.indexOf(commandPath) === -1) { obj.PATH = process.env.PATH + getEvnSplit() + commandPath; } return Object.assign(process.env, obj); }Copy the code

The main implementation is the build method, which performs two operations, corssEvn and webpackService. In this case, the spawn method of node child_process is used to start two child processes, cross-env and webpack-dev-server. It should be noted that the commands on Win and Linux are different, and you need to use process.platform to judge. The command on Win is xxx.cmd, and the command on Linux is XXX. CorssEvn defines an environment variable NODE_ENV = [development | production] to distinguish dev prod environment, there is a need to pay attention to is the host project using different terminal after install this node_modules directory structure will be different, For example, with NPM import installation, webpack-dev-server and cross-evn will be installed in flat mode to the node_modules of the host project, while CNPM will be installed to the node_modules of the package. So we don’t know where to look for the webpack-dev-server and corss-env commands. We should write the package/node_modules/. Bin path to the environment variable that starts the child process. The package/node_modules environment variable is not one of them, and the getEnv method does that, One other thing to note is that the environment variable separators differ between Windows and Linux. The getEvnSplit method gets the environment variable separators for different operating systems. When webpack-dev-server is called, the configuration file is executed as webpack.dev.js, and the path of the run command and the user-specified configuration file path are passed.

   github

  • Write a WebPack-based React packaging tool (1)
  • Write a WebPack-based React packaging tool (2)
  • Write a WebPack-based React packaging tool (3)
  • Write a WebPack-based React packaging tool (4)
  • Write a WebPack-based React packaging tool (5)
  • Write a WebPack-based React packaging tool (6)