Adding an example with the monaco webpack plugin (#42)

Adding an example with the monaco webpack plugin
6 years ago · e5f64ddfef
parent 9c63f2d1a6 c79ea537b5
commit e5f64ddfef
7 changed files with 4320 additions and 0 deletions
--- a/browser-esm-webpack-monaco-plugin/.gitignore
+++ b/browser-esm-webpack-monaco-plugin/.gitignore
@ -0,0 +1 @@
+dist/*.js
--- a/browser-esm-webpack-monaco-plugin/dist/index.html
+++ b/browser-esm-webpack-monaco-plugin/dist/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+</head>
+<body>
+
+<script src="./main.bundle.js"></script>
+
+</body>
+</html>
--- a/browser-esm-webpack-monaco-plugin/index.html
+++ b/browser-esm-webpack-monaco-plugin/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+</head>
+<body>
+
+<h2>Monaco Editor Webpack Plugin Sample</h2>
+
+To run this sample, you need to:
+
+<pre>
+$/browser-esm-webpack> npm install .
+$/browser-esm-webpack> ./node_modules/.bin/webpack
+</pre>
+
+Then, <a href="./dist">open the ./dist folder</a>.
+
+</body>
+</html>
--- a/browser-esm-webpack-monaco-plugin/index.js
+++ b/browser-esm-webpack-monaco-plugin/index.js
@ -0,0 +1,20 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+
+(function () {
+	// create div to avoid needing a HtmlWebpackPlugin template
+	const div = document.createElement('div');
+	div.id = 'root';
+	div.style = 'width:800px; height:600px; border:1px solid #ccc;';
+
+	document.body.appendChild(div);
+})();
+
+monaco.editor.create(
+	document.getElementById('root'),
+	{
+		value: `const foo = () => 0;`,
+		language: 'javascript',
+		theme: 'vs-dark'
+	}
+);
+
--- a/browser-esm-webpack-monaco-plugin/package-lock.json
+++ b/browser-esm-webpack-monaco-plugin/package-lock.json
--- a/browser-esm-webpack-monaco-plugin/package.json
+++ b/browser-esm-webpack-monaco-plugin/package.json
@ -0,0 +1,24 @@
+{
+	"name": "monaco",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"private": true,
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build": "webpack --progress"
+	},
+	"keywords": [],
+	"author": "",
+	"devDependencies": {
+		"css-loader": "^3.2.0",
+		"file-loader": "^4.2.0",
+		"monaco-editor-webpack-plugin": "^1.7.0",
+		"style-loader": "^1.0.0",
+		"webpack": "^4.39.2",
+		"webpack-cli": "^3.3.6"
+	},
+	"dependencies": {
+		"monaco-editor": "^0.16.2"
+	}
+}
--- a/browser-esm-webpack-monaco-plugin/webpack.config.js
+++ b/browser-esm-webpack-monaco-plugin/webpack.config.js
@ -0,0 +1,22 @@
+const path = require("path");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
+module.exports = {
+	mode: process.env.NODE_ENV,
+	entry: "./index.js",
+	output: {
+		path: path.resolve(__dirname, "dist"),
+		filename: "[name].bundle.js",
+	},
+	module: {
+		rules: [{
+			test: /\.css$/,
+			use: ["style-loader", "css-loader",],
+		}],
+	},
+	plugins: [
+		new MonacoWebpackPlugin({
+			languages: ["typescript", "javascript", "css"],
+		})
+	]
+};