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

buildpackagets.js

const { spawn } = require('child_process');
const path = require('path');
const { getEnv } = require('./util');
// スクリプトを実行するパス
const runtimePath = process.cwd();
// スクリプトが置かれるパス
const codePath = __dirname;
const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep);
// buildpackage生成ディレクトリ名
const generateDirName = 'lib';
// buildpackage元の名前
const srcDirName = 'src';
// コード出力パス
const outputPath = path.join(runtimePath, generateDirName);
// コードのコンパイルパス
let compilePath;
let index = 0;
// buildpackageの全てのタスクは
const tasks = [
 // ビルドディレクトリをクリアする
 clearTask,
 // tsctypescriptを変換する
 tscTask,
 //  
 gulpTask,
];
/**
 * clearTask
 * 出力ディレクトリをクリアする
 * @return {Promise}
 */
function clearTask() {
 return new Promise((resolve, reject) => {
 const command = process.platform === 'win32' ? `rimraf.cmd` : `rimraf`;
 const rimrafProcess = spawn(command, [outputPath], {
 cwd: codePath,
 encoding: 'utf-8',
 env: getEnv(commandPath),
 });
 rimrafProcess.stdout.on('data', (data) => {
 console.log(`stdout: ${data}`);
 });
 rimrafProcess.stderr.on('data', (data) => {
 console.log(`stderr: ${data}`);
 });
 rimrafProcess.on('close', (code) => {
 console.log(`rimrafClose ${code}`);
 resolve();
 });
 });
}
/**
 * tscTask
 * srcをlibに変換する
 * @return {Promise}
 */
function tscTask() {
 return new Promise((resolve, reject) => {
 const command = process.platform === 'win32' ? `tsc.cmd` : `tsc`;
 const tscProcess = spawn(command, ['-p', runtimePath], {
 cwd: codePath,
 encoding: 'utf-8',
 env: getEnv(commandPath),
 });
 tscProcess.stdout.on('data', (data) => {
 console.log(`stdout: ${data}`);
 });
 tscProcess.stderr.on('data', (data) => {
 console.log(`stderr: ${data}`);
 });
 tscProcess.on('close', (code) => {
 console.log(`tscClose ${code}`);
 resolve();
 });
 });
}
/**
 * gulpTask
 * @return {Promise}
 */
function gulpTask() {
 return new Promise((resolve, reject) => {
 const command = process.platform === 'win32' ? `gulp.cmd` : `gulp`;
 const gulpProcess = spawn(
 command,
 [
 '--outputpath',
 // 出力パス
 path.join(outputPath, path.sep),
 '--compilepath',
 // コンパイルディレクトリ
 path.join(compilePath, path.sep),
 ],
 {
 cwd: codePath,
 encoding: 'utf-8',
 env: getEnv(commandPath),
 },
 );
 gulpProcess.stdout.on('data', (data) => {
 console.log(`stdout: ${data}`);
 });
 gulpProcess.stderr.on('data', (data) => {
 console.log(`stderr: ${data}`);
 });
 gulpProcess.on('close', (code) => {
 console.log(`gulpTaskClose ${code}`);
 resolve();
 });
 });
}
/**
 * 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} - srcPath
 */
 build(srcPath) {
 if (srcPath) {
 // コンパイルディレクトリを指定する
 if (path.isAbsolute(srcPath)) {
 // は絶対パスである
 compilePath = srcPath;
 } else {
 // は相対パスである
 compilePath = path.join(runtimePath, srcPath);
 }
 } else {
 // コンパイルディレクトリを指定しない
 compilePath = path.join(runtimePath, srcDirName);
 }
 loopTask()
 .then(() => {
 console.log('finish');
 process.exit();
 })
 .catch((error) => {
 console.log(error);
 });
 },
};

これはbuildpackage.jsと似ていますが、buildpackage.jsはjsとjsxファイルをコンパイルするためにbabelを使います。tsconfig.jsファイルを探すためのコンテキストパスを指定します。ユーザーがtypescriptを設定しやすくするために、デフォルトのtypescript設定ファイルがここで提供され、ホストプロジェクトはこの基本設定ファイルを参照することができます。

{
 "compilerOptions": {
 "declaration": true,
 "noImplicitAny": false,
 "target": "es5",
 "lib": ["dom", "dom.iterable", "esnext"],
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "module": "commonjs",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "react",
 "paths": {
 "*": ["types/*"]
 }
 }
}