Eclipse Java EEのDynamic Web ProjectでJavaScriptのライブラリの構成管理をやりたかったので，ちょっとトライしてみました．
以下の作業をすれば，${PROJECT_HOME}/libにあるJavaScriptのライブラリ，あるいは，${PROJECT_HOME}/src/main/javascriptにある自身のコードが更新した際に，それらを一つにパックしたコードを${PROJECT_HOME}/src/main/webapp/jsに作成することができます．ただ，ライブラリと自分のコードを一つにパックすると，デバッグしずらいし，Builderをプロジェクトごとに登録するのが面倒だし，元々やりたかったのはJavaScriptライブラリの構成管理なので，使わずじまいとなりそうです．ちなみに，${PROJECT_HOME}は，プロジェクトのベースとなるディレクトリのことです．
| 1. | 存在しない場合，下記のディレクトリを作成． |
|
${PROJECT_HOME}/lib${PROJECT_HOME}/src/main/javascript${PROJECT_HOME}/src/main/webapp/js
|
| 2. | 次のコマンドを実行． |
|
% cd ${PROJECT_HOME}/lib
% npm init -y
% npm install --save-dev webpack webpack-cli
|
| 3. | 次の内容を「${PROJECT_HOME}/lib/package.json」に追加． |
|
{
:
"scripts": {
:
"build": "webpack --mode=production"
},
:
}
|
| 4. | 次の内容のファイルを「${PROJECT_HOME}/lib/webpack.config.js」に作成． |
|
module.exports = {
entry: '../src/main/javascript/index.js',
output: {
path: __dirname + '/../src/main/webapp/js',
filename: 'main.js',
},
resolve: {
modules: ["node_modules", "../../../lib/node_modules/"],
}
};
|
| 5. | 次の内容の実行ファイル（実行パーミッションを付与する必要あり）を「${PROJECT_HOME}/bin/npmbuild.sh」に作成． |
|
#!/bin/sh
export PATH="/usr/local/bin:$PATH"
npm run build
|
| 6. | 右ボタンを押下して，表示されるプルダウンメニューから「Properties」を選択． |
| 7. | 「Properties」ダイアログにおいて次の操作を実行． |
|
| 1. | 左にあるメニューから「Builders」を選択． |
| 2. | 「New...」ボタンを押下． |
|
| 8. | 「Choose configuration type」ダイアログ内の「Program」を選択し，「OK」ボタンを押下． |
| 9. | 「Edit Configuration」ダイアログにおいて次の操作を実行． |
|
| 1. | 「Name」に作成するBuilderの名称を入力． |
| 2. | 「Main」タブにおいて，次の操作を実行． |
|
| 1. | 「Location」に実行ファイルのパスを入力（「Browse Workspace...」ボタンを押下して表示されるダイアログで当該ファイルを選択可能）． |
| 2. | 「Working Directory」に「package.json」が置かれたディレクトリのパスを入力（「Browse Workspace...」ボタンを押下して表示されるダイアログで当該ファイルを選択可能）． |
|
| 3. | 「Refresh」タブにおいて，次の操作を実行． |
|
| 1. | 「Refresh resources upon completion」をチェック． |
| 2. | 「Specific resources」をチェック． |
| 3. | 「Specify Resources...」ボタンを押下して表示されるダイアログでBuilderを実行する対象となるディレクトリを選択． |
| 4. | 「Recursively include sub-folders」をチェック． |
|
| 4. | 「Build Options」タブにおいて，次の操作を実行． |
|
| 1. | 「Allocate Console」をチェック． |
| 2. | 「After a "Clean"」，「During manual builds」，「During auto builds」をチェック． |
| 3. | 「Specify working set of relevant resources」をチェック． |
| 4. | 「Specify Resources...」ボタンを押下して表示されるダイアログでBuilderを実行する対象となるディレクトリを選択． |
|
| 5. | 「OK」ボタンを押下． |
|
| 10. | 「Properties」ダイアログにおいて，次の操作を実行． |
|
| 1. | 選択したBuilderがリストの一番上になるまで「Up」ボタンを押下． |
| 2. | 「Apply and Close」ボタンを押下． |
|
0 件のコメント:
コメントを投稿