monaco-editor リポジトリのサンプル「browser-esm-webpack-monaco-plugin」を実行するところまで。
monaco-edito サンプルの作成
npm プロジェクトの初期化
いつもの。
npm initサンプルコードのコピー
monaco-editor の sample から、
browser-esm-webpack-monaco-plugin
のソースコードをコピー。
monaco-editor/samples at e77825074dc019aebc7b28368428d16226d9ab8b · microsoft/monaco-editor
必要パッケージのインストール
npm install --save monaco-editor
npm install --save-dev webpack webpack-cli monaco-editor-webpack-plugin style-loader css-loader file-loaderビルド
以下コマンドでビルドが成功することを確認。
npx webpack --mode=development動作確認
webpack-dev-server
で、ローカルサーバーを立ち上げ、動作確認する。
必要パッケージのインストール
npm install --save-dev webpack-dev-serverpackage.json の更新
scripts に、ビルドで使いそうなコマンドを追加。
webpack-dev-server を使うのは "start": "webpack
serve" の定義部分。
また、webpack-dev-server をインストールしたので、
devDependencies に webpack-dev-server
が追加されている。
diff --git a/js/monaco-editor/firststep/package.json b/js/monaco-editor/firststep/package.json
index 44eacaa..bd4660e 100644
--- a/js/monaco-editor/firststep/package.json
+++ b/js/monaco-editor/firststep/package.json
@@ -4,7 +4,11 @@
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "webpack serve",
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack",
+ "build:dev": "webpack --mode=development",
+ "build:pro": "webpack --mode=production"
},
"author": "mikoto2000",
"license": "MIT",
@@ -17,6 +21,7 @@
"monaco-editor-webpack-plugin": "^7.0.1",
"style-loader": "^3.3.1",
"webpack": "^5.70.0",
- "webpack-cli": "^4.9.2"
+ "webpack-cli": "^4.9.2",
+ "webpack-dev-server": "^4.7.4"
}
}webpack.config.json
を更新
- デフォルトのモードを
developmentに変更 ./distのパスを変数化して共有devServerセクションにwebpack-dev-serverの設定を追加
diff --git a/js/monaco-editor/firststep/webpack.config.js b/js/monaco-editor/firststep/webpack.config.js
index 823fa44..8b5ea53 100644
--- a/js/monaco-editor/firststep/webpack.config.js
+++ b/js/monaco-editor/firststep/webpack.config.js
@@ -1,13 +1,19 @@
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const distPath = path.resolve(__dirname, 'dist');
+
module.exports = {
- mode: process.env.NODE_ENV,
+ mode: 'development',
entry: './index.js',
output: {
- path: path.resolve(__dirname, 'dist'),
+ path: distPath,
filename: '[name].bundle.js'
},
+ devServer: {
+ static: distPath,
+ open: true
+ },
module: {
rules: [
{webpack-dev-server の設定は以下の通り。
devServe.static: サーバーのドキュメントルートdevServe.open: 起動時にブラウザを開く
動作確認
webpack-dev-server を立ち上げて動作確認。
npx webpack serve
この作業を以下 PR にまとめたので、必要があれば参照してください。
Monaco firststep by mikoto2000 · Pull Request #45 · mikoto2000/MiscellaneousStudy
0 件のコメント:
コメントを投稿