ビルドパッケージ.js
const { spawn } = require('child_process');
const path = require('path');
// スクリプトを実行するパス
const runtimePath = process.cwd();
// スクリプトへのパス
const codePath = __dirname;
const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep);
const { getEnv } = require('./util');
// buildpackage生成されたディレクトリ名
const generateDirName = 'lib';
// buildpackage元の名前
const srcDirName = 'src';
// コード出力パス
const outputPath = path.join(runtimePath, generateDirName);
// コード・コンパイル・パス
let compilePath;
let index = 0;
// buildpackageすべてのタスク
const tasks = [
// 生成されたディレクトリをクリアする
clearTask,
// babel変換する、変換するjs
babelTask,
//
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();
});
});
}
/**
* babelTask
* srcをlib
* @return {Promise}
*/
function babelTask() {
return new Promise((resolve, reject) => {
const command = process.platform === 'win32' ? `babel.cmd` : `babel`;
const babelProcess = spawn(
command,
[
// コンパイル済みディレクトリ
compilePath,
'-d',
// 出力ディレクトリ
outputPath,
'--ignore',
'__tests__',
],
{
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(`babelClose ${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);
});
},
};
gulpfile.js
const path = require('path');
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sourceMap = require('gulp-sourcemaps');
const copyexts = [
'less',
'css',
'svg',
'jpg',
'jpeg',
'gif',
'png',
'bmp',
'json',
'eot',
'woff',
'ttf',
];
const commandArgs = require('./commandArgs');
const argsMap = commandArgs.initCommandArgs();
const outputpath = argsMap.get('--outputpath')[0];
const compilePath = argsMap.get('--compilepath')[0];
/**
* copy
*/
gulp.task('copy', () => {
for (let i = 0; i < copyexts.length; i++) {
gulp.src(path.join(compilePath, '**', `*.${copyexts[i]}`)).pipe(gulp.dest(outputpath));
}
});
/**
*
*/
gulp.task('minjs', () => {
return gulp
.src([
path.join(outputpath, '**', '*.js'),
path.join(outputpath, '**', '*.jsx'),
])
.pipe(sourceMap.init())
.pipe(uglify())
.pipe(sourceMap.write('.'))
.pipe(gulp.dest(outputpath));
});
gulp.task('default', ['copy', 'minjs']);
buildpackage.jsはnpmのパッケージをコンパイルするためのもので、現在市販されているlibaryツールのパッケージには、rollup、gulp、webpackがあり、libaryのパッケージにはrollupを使うのが一般的ですが、私は古いgulpを使ってパッケージングしています。パッケージングに古いgulpを使っているのは、もしかしたら昔から使っているものかもしれませんが、以下のlibaryの種類は、個人的にはlibaryは2種類に分けるべきだと理解しています。typescriptで書かれたnodejsのパッケージは、もしコンパイルが必要なければ、実際にコンパイルが必要なのはブラウザのライブラリです、jsとjsxファイルはes7~es9の新しい構文を使用する可能性があるため、これらのファイルをコンパイルするためにbabelコマンドを使用する必要があります。この2つの操作の後、libディレクトリが作成され、lib内のファイルの構造はsrc内のファイルの構造と同じですが、jsxファイルは同じ名前のjsファイルになり、jsファイルの内容はbabelによる変換の結果です。ファイルに変換され、それ以外のファイルはそのまま出力されます。というのも、babelがjsやjsxを変換するとき、import 'xxx.less' をパースできないからです。xxx.json' を導入することができません。これらのリソースファイルはホストプロジェクトでインポートされ、ホストプロジェクトのwebpack設定を使って解析される必要があります。
