SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 18:32:56 +01:00
Code Issues Projects Releases Packages Activity

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

Browse source 
Adding an example with the monaco webpack plugin
This commit is contained in:
Alexandru Dima 2019-08-14 16:05:39 +02:00 • committed by GitHub
commit e5f64ddfef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 4320 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
browser-esm-webpack-monaco-plugin/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
dist/*.js

12
browser-esm-webpack-monaco-plugin/dist/index.html vendored Normal file
View file

@ -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>

21
browser-esm-webpack-monaco-plugin/index.html Normal file
View file

@ -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>

20
browser-esm-webpack-monaco-plugin/index.js Normal file
View file

@ -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'
}
);

4220
browser-esm-webpack-monaco-plugin/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

24
browser-esm-webpack-monaco-plugin/package.json Normal file
View file

@ -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"
}
}

22
browser-esm-webpack-monaco-plugin/webpack.config.js Normal file
View file

@ -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"],
})
]
};