「Visual Studio Code」IDE(Integrated Development Environment：統合開発環境)に「Babel、webpack」開発環境を構築する(Visual Studio Codeはインストール済みとする)。
基本的な「推奨プラグイン、settings.jsonの設定」は下記を参照して下さい。
Visual Studio Codeでフロントエンド開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59&
Node.jsをインストール(下記ページ参照)。
LTS(Long Term Support：長期サポート)版を推奨します(LTSならバグが少なくなっていると思われます)。
Node.js
https://nodejs.org/en/download/
Node.jsをインストールするとnpmコマンドが使えるようになります。
◆【プロジェクト作成】
プロジェクト用フォルダー「babel000」を作成してみる。
マイドキュメントに「babel000」フォルダーを作成(Node.jsのバージョンによってはプロジェクト･フォルダー名に英大文字は使えない場合があります、最近のNode.jsのバージョンなら英大文字は使えるようですが)。
コマンド･プロンプトでも良いですが、せっかくなので「Visual Studio Code」でプロジェクトを作成してみる。
「Visual Studio Code」で[メニュー･バー]→[ファイル]→[フォルダー]を選択し、マイドキュメントに作成した「babel000」フォルダーを開く。
これでプロジェクト用フォルダー「babel000」はカレント･ディレクトリとなる(逆に言うとカレント･ディレクトリがプロジェクト用フォルダーになる)。
◆【環境設定の初期化】
[メニュー･バー]→[表示]→[ターミナル]を選択(又は[Ctrl]+[@]でターミナルをON／OFF可)し、ターミナルで下記を実行。
※プロジェクト用フォルダー(カレント･ディレクトリ)の環境設定を初期化する(「package.json」を生成する、既に「package.json」が存在するなら、その初期化は不要)。
> npm init
↑入力を うながされますが、とりあえず[Enter]キーを押し続ければOK。
【「Command Prompt」を推奨】
「PowerShell」は起動が重いので「Command Prompt」を推奨(settings.jsonで設定する)、設定したい場合はググって下さい。
【package.jsonの設定】(必ず「モジュールの導入」前に)下記をコピペしてセーブ。
"scripts"で「babel、wpd、wpp」コマンドを定義している、ターミナルで「npm run babel」、「npm run wpd」、「npm run wpp」を入力するすることにより、定義されたスクリプトが実行される。
「wpd」は開発用でデバッグする場合は「wpd」でなければならない、「wpp」は本番用でファイル･サイズがダイエットされスリムになる。
{
"scripts": {
"babel": "node_modules\\.bin\\babel src --out-dir bes",
"wpd": "webpack --mode development --devtool=source-map",
"wpp": "webpack --mode production"
},
"author": "",
"license": "ISC"
}
◆【モジュールの導入】
ターミナルで下記を実行。
※プロジェクト用フォルダー(カレント･ディレクトリ)のみにモジュールを導入する(つまり、そのフォルダー以外では、それらのモジュールは機能しない)。
※モジュールが導入されると、package.jsonに その「モジュール名、バージョン」などが追記される。
> npm install --save-dev @babel/core @babel/cli @babel/preset-env
> npm install --save @babel/polyfill
> npm install --save-dev webpack webpack-cli
下記でNode.js用に導入されているモジュールを表示(それは「Visual Studio Code」に導入されているプラグインでは無い)。
> npm list --depth=0
下記でNode.js用に導入されているモジュールに、新しいバージョンが存在するかどうか確認 可能。
> npm outdated
【babel.config.jsの設定】babel.config.jsを作成し、下記をコピペしてセーブ。
const presets = [
["@babel/preset-env", {
"targets": [">0.25% in JP", "not ie <= 10", "not op_mini all"],
// 必要なpolyfillプラグインを自動的に使う
"useBuiltIns": "usage",
}],
];
module.exports = { presets };
【webpack.config.jsの設定】webpack.config.jsを作成し、下記をコピペしてセーブ。
module.exports = {
context: __dirname + "/bes", // 入力ファイルのディレクト名
entry: { // 入力ファイルを複数指定可能
main: "./main.js",
},
output: {
path: __dirname + "/pes", // 出力ファイルのディレクト名
filename: "[name].js", // 出力ファイル名
},
target: ["web", "es5"],
};
【.vscode\tasks.jsonの設定】.vscodeにtasks.jsonを作成し、下記をコピペしてセーブ。
"tasks"で[npm: babel]、[npm: webpack development](開発用)、[npm: webpack production](本番用)を定義している。
[F1]キーでコマンド･パレットを開き、「tasks」を入力し[Enter]、[Tasks: Run Task](又は[Tasks: Run Build Task])を選択(実行)する。
それから[npm: babel]、[npm: webpack development](開発用)、[npm: webpack production](本番用)などを選択(実行)してやれば良い。
[npm: webpack development]は開発用でデバッグする場合は[npm: webpack development]でなければならない、[npm: webpack production]は本番用でファイル･サイズがダイエットされスリムになる。
なお コマンド･パレットから実行すると、終了時に「ターミナルはタスクで再利用されます、閉じるには任意のキーを押してください」とメッセージが表示されるので、ターミナルをクリック(フォーカスをターミナルに移動)し、[Enter]を入力してやれば良い。
{
"version": "2.0.0",
"tasks": [
{
"script": "babel",
"label": "npm: babel",
"type": "npm",
"problemMatcher": [],
},
{
"script": "wpd",
"label": "npm: webpack development", // 開発用
"type": "npm",
"problemMatcher": [],
},
{
"script": "wpp",
"label": "npm: webpack production", // 本番用
"type": "npm",
"problemMatcher": [],
},
]
}
◆【ファイル作成】
プロジェクト用フォルダに「hello.html」ファイルを作成、「src」フォルダを作成、「src」フォルダに「main.js」ファイルを作成する。
【hello.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./pes/main.js"></script>
<title></title>
</head>
<body>
</body>
</html>
注意点としてはwebpackではコードがminify(短縮化)されて、通常の関数は関数名が改変されてしまうので、外部から参照したい場合は必ず下記のような関数式で定義しなければならない(外部から参照しない場合は そんなことをする必要はない)。
下記の例では「hoge」が関数名となるので、「hoge( 引数 )」で呼び出してやれば良い。
なお webpackでは全てのコードがブロック内(具体的には即時･関数内)に入るので、先頭に「var、let、const」を付けると、(関数式も含め)全てローカル･スコープになってしまうので、グローバル･スコープとして使いたい場合は先頭に「var、let、const」を付けてはならない、また その場合はコード内の「"use strict";」を削除しないとエラーになるので注意が必要です。
なお ブロック内でエラーになるコードもダメと言うことになるので、テスト的にブロック内でプログラムを組んでみるのも良いでしょう。
> hoge = function( 引数 ){
> 関数内の処理
> };
【src\main.js】
Promise.resolve().then(res => console.log("Hello, world!") );
ターミナルで「npm run babel」を実行。
それが正常に実行されたら「npm run wpd」(開発用)、又は「npm run wpp」(本番用)を実行してやる。
webpackしたコードでデバッグしたい場合は「wpd」(開発用)でなければならない、「wpp」(本番用)はファイル･サイズがダイエットされスリムになる。
※前述のとおり、それらの操作はコマンド･パレットからも可能。
それが正常に実行されたら、この例では「pes\main.js」が生成される。
ただし (関数式も含め)グローバル･スコープ変数の定義が有るとエラーになるので、グローバル･スコープ変数が有る場合は「"use strict";」を変換で一気に削除し保存して下さい。
「hello.html」を表示し、もし 何かしらエラーが出たらリロードしてみて、何のエラーも無くコンソールに「Hello, world!」が表示されたら成功。
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
