blog

webpackベースのReactパッケージングツールを書く (4)

このコマンドも同じように実装されており、ナレッジではwebpack-dev-serverコマンドが呼び出されますが、ここではwebpackコマンドが呼び出されます。 github write...

Jul 22, 2020 · 3 min. read
シェア

buildapp.js

#!/usr/bin/env node const path = require('path'); const { spawn } = require('child_process'); // コマンドを実行するパス const runtimePath = process.cwd(); // build.jsパス const codePath = __dirname; // ctbuild.cmd ctbuild.shパス const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep); const { getEnv } = require('./util'); // 設定ファイルへのパス let configPath; let define; /** * corssenvTask * @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=prod', 'NODE_ENV=production'], { 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(); }); }); } /** * webpackTask * @return {Promise} */ function webpackTask() { return new Promise((resolve, reject) => { const command = process.platform === 'win32' ? `webpack.cmd` : `webpack`; const babelProcess = spawn( command, [ '--open', '--config', path.join('webpackconfig', 'webpack.prod.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(`webpackTaskClose ${code}`); resolve(); }); }); } const tasks = [corssenvTask, webpackTask]; 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設定ファイルへのパス。指定しない場合は、コマンド実行ディレクトリのctbuild.config.js */ 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); }); }, };

このコマンドはstartapp.jsと同じように実装されていますが、webpack-dev-serverコマンドはstartapp.jsで呼び出され、webpackコマンドはここで呼び出されます。

github

Read next

Reactフック

React-Hooksは、クラスのすべてを達成するだけでなく、クラスコンポーネントの問題のいくつかを解決することができますので、React-Hooksを受け入れない理由は何ですか? そしてReact...

Jul 22, 2020 · 6 min read