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

目的

Reactをパッケージ化できるホストプロジェクト
パッケージ
実装の詳細のカプセル化
ユーザーは、ホストプロジェクト内の既存のコンフィギュレーションをコンフィギュレーションファイルの形式で追加、削除、変更できます。
異なる機能を外部に公開するコマンド
ユーザーによるインストール後、すぐに結果が得られます。
ホストプロジェクトやパッケージを書くためのjavascriptとtypescriptをサポートしています。

コマンド設計

startapp - ホストプロジェクトをローカルで実行します。
buildapp - ホストプロジェクトのパッケージ化
buildpackage - パッケージをコンパイル
buildumd - umdモード用にパッケージをコンパイル
buildpackagets - tsで記述したパッケージをコンパイルします。

スタートアップコマンド

-c, --config <path> (-cまたは --config で設定ファイルを指定する） -d, --define

buildappコマンド

-c, --config <path> (-cまたは --config で設定ファイルを指定する)
-d, --define (コマンドに渡すパラメータを", "分割で指定する)

buildumd コマンド

-c, --config <path> (-cまたは --config で設定ファイルを指定する)
-p, --packagename (パッケージ化されたファイルのパッケージ名)
-d, --define (コマンドに渡すパラメータを", "分割で指定する)

buildpackageコマンド

-p, --srcpath <path> (-pまたは-srcpathでソースコードへのパスを指定する)

buildpackagets コマンド

-p, --srcpath <path> (-pまたは-srcpathでソースコードへのパスを指定する)

コマンド実装の詳細

プロジェクト全体の重要書類は以下の通りです。

babel.config.js // babelの設定ファイルは
build.js // プロジェクトのエントリファイル
buildapp.js // buildappコマンドの実装
buildpackage.js // buildpackageコマンドの実装 
buildpackagets.js // buildpackagetsコマンドの実装
buildumd.js // buildumdコマンドの実装
startapp.js // startappコマンドの実装
babel.config.js // babelの構文解析を設定する
gulpfile.js // パッケージを再生する gulpの設定
package.json // package.json

package.jsonの依存関係の一覧です。すべての依存関係が何であるかを明確にするために、依存関係を以下にグループ化します。

ウェブパック関連

"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9",
"webpack-merge": "^4.1.4",
"webpackbar": "^4.0.0",

ローダー関連

"babel-loader": "^8.0.4",
"cache-loader": "^4.1.0",
"css-loader": "3.2.0",
"csv-loader": "^3.0.2",
"ejs-loader": "^0.3.1",
"file-loader": "^2.0.0",
"less-loader": "^4.1.0",
"ts-loader": "^6.2.1",
"url-loader": "^2.1.0",
"xml-loader": "^1.2.1",
"yaml-loader": "^0.5.0",
"json-loader": "^0.5.7",

バベル関連

"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-proposal-decorators": "^7.10.3",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.8.3",
"@babel/runtime": "^7.1.5",

プラグイン関連

"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^4.5.3",
"fork-ts-checker-webpack-plugin": "^4.0.5",
"html-webpack-include-assets-plugin": "^1.0.6",
"html-webpack-plugin": "^4.0.0-beta.2",
"mini-css-extract-plugin": "^0.8.0",

スタイル関連

"less": "3.9.0",

その他

"commander": "^3.0.1",
"cross-env": "^5.2.0",
"gulp": "^3.9.1",
"rimraf": "^2.6.2",
"typescript": "^3.8.2"

一連のコマンドが提供されるので、package.jsonのbinフィールドを定義します。

"bin": { 
 "ctbuild": "./build.js"
},

binに定義されているキーは、コマンドの名前は、このパッケージをインストールするときにnode_modules.binディレクトリにctbuild.shを作成するために、ctbuild.cmdこれら2つのファイルは、jsスクリプトのパスの値は、どのファイルが対応するスクリプトファイルを実行するために実行されるに関係なく、キーjsファイルの次の詳細です。

ビルド

コマンドのエントリーファイルは、エントリーファイルが行う主なことは、コマンドラインパラメータを解析することです、別の操作を実行するために別のパラメータによると、ここではコマンドラインパラメータを解析するために司令官www.npmjs.com/package/comライブラリの使用


#!/usr/bin/env node
const program = require('commander');
const packageJson = require('./package');
// コマンドの設定
const commandConfig = require('./commandConfig');
// バージョン番号を設定する
program.version(packageJson.version);
// すべてのコマンドの設定を繰り返す
Object.keys(commandConfig).forEach((command) => { 
 // コマンドの設定情報を取得する
 const { alias, description, options = [], action } = commandConfig[command]; 
 // コマンドを設定する
 const commandHandler = program
 .command(command)
 .alias(alias) 
 .description(description) 
 .action(action); 
 // コマンドのパラメータを設定する
 options.forEach(({ command: optionCommand, description: optionDescription }) => { 
 commandHandler.option(optionCommand, optionDescription); 
 });
});
// コマンドライン引数を設定する
program.parse(process.argv);
if (!program.args.length) { 
 program.help();
}

最初の行は、このスクリプトファイルのインタプリタを指定するためのShebangです。Shebangを理解すれば、この行がスクリプトファイルをnodeで実行するように指定するために追加されていることが理解できるでしょう。


// commandConfig.js コマンドの設定
// startapp
const startapp = require('./startapp');
const buildapp = require('./buildapp');
const buildumd = require('./buildumd');
const buildpackage = require('./buildpackage');
const buildpackagets = require('./buildpackagets');
/**
 * , "で分割されたdefineパラメータをkey/valueマップに変換する
 * @param {String} - define
 * @return Array
 */
function getDefineMap(define = '') {
 return define.split(',');
}
module.exports = {
 // dev 
 startapp: {
 alias: 'start',
 description: 'run dev',
 options: [
 {
 command: '-c, --config <path>',
 description: 'ctbuild.config.js Configuration file path',
 },
 {
 command: '-d, --define <path>',
 description: 'custom params split ","',
 },
 ],
 action: (entry) => {
 console.log('startapp');
 const { config, define = '' } = entry;
 startapp.build({
 config,
 define: getDefineMap(define),
 });
 },
 },
 // 本番環境のパッケージ化
 buildapp: {
 alias: 'build',
 description: 'build app',
 options: [
 {
 command: '-c, --config <path>',
 description: 'ctbuild.config.js Configuration file path',
 },
 {
 command: '-d, --define <path>',
 description: 'custom params split ","',
 },
 ],
 action: (entry) => {
 console.log('buildapp');
 // buildapp.build(entry.config, entry.define);
 const { config, define = '' } = entry;
 buildapp.build({
 config,
 define: getDefineMap(define),
 });
 },
 },
 // 環境umdを生成するためのパッケージング
 buildumd: {
 alias: 'umd',
 description: 'build app by umd',
 options: [
 {
 command: '-c, --config <path>',
 description: 'ctbuild.config.js Configuration file path',
 },
 {
 command: '-p, --packagename <name>',
 description: 'package name',
 },
 {
 command: '-d, --define <path>',
 description: 'custom params split ","',
 },
 ],
 action: (entry) => {
 console.log('buildumd');
 const { config, packagename, define = '' } = entry;
 buildumd.build({
 config,
 packagename,
 define: getDefineMap(define),
 });
 },
 },
 // パッケージをコンパイルする
 buildpackage: {
 alias: 'package',
 description: 'build package',
 options: [
 {
 command: '-p, --srcpath <path>',
 description: 'build path',
 },
 ],
 action: (entry) => {
 console.log('buildpackage');
 buildpackage.build(entry.srcpath);
 },
 },
 // tsバージョンのパッケージをコンパイルする
 buildpackagets: {
 alias: 'packagets',
 description: 'build packagets',
 options: [
 {
 command: '-p, --srcpath <path>',
 description: 'build path',
 },
 ],
 action: (entry) => {
 console.log('buildpackagets');
 buildpackagets.build(entry.srcpath);
 },
 },
};

command: '-p, --srcpath <path>keyはコマンドの名前、aliasはコマンドの別名、descriptionはコマンドの簡単な説明、optionsはコマンドのパラメータで、パラメータは複数指定できます。エントリでコマンドのパラメータを取得し、対応するスクリプトのビルドメソッドを呼び出して機能を実装します。

startapp.js、buildapp.js、buildumd.jsはすべてwebpackの操作のラッパーなので、次のステップではwebpackの設定ファイルの記述が必要です。

ギズブ

webpackベースのReactパッケージングツールの作成
webpackベースのReactパッケージングツールの作成
webpackベースのReactパッケージングツールの作成
webpackベースのReactパッケージングツールの作成
webpackベースのReactパッケージングツールの作成
webpackベースのReactパッケージングツールの作成

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

目的

コマンド設計

コマンド実装の詳細

Read next

プロキシパターン

JS ソート・アルゴリズムトップ10

アプリ減量の道

Binderにおける権限制御

JDk8 AtomicInteger ソースコード解析 CAS

JDKパフォーマンス監視ツール

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

目的

コマンド設計

コマンド実装の詳細

Read next

プロキシパターン

JS ソート・アルゴリズム トップ10

アプリ減量の道

Binderにおける権限制御

JDk8 AtomicInteger ソースコード解析 CAS

JDKパフォーマンス監視ツール

JS ソート・アルゴリズムトップ10