Reorganize, add webpack sample

This commit is contained in:
Alex Dima 2018-03-14 16:37:11 +01:00
parent f692f47f73
commit f22dfb79ba
26 changed files with 8904 additions and 9 deletions

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

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

14
browser-esm-webpack/dist/index.html vendored Normal file
View file

@ -0,0 +1,14 @@
<!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>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>
<script src="./app.bundle.js"></script>
</body>
</html>

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

View file

@ -0,0 +1,28 @@
import * as monaco from 'monaco-editor';
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === 'typescript' || label === 'javascript') {
return './ts.worker.bundle.js';
}
return './editor.worker.bundle.js';
}
}
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});

8767
browser-esm-webpack/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,11 @@
{
"name": "helloworld",
"dependencies": {},
"devDependencies": {
"css-loader": "^0.28.10",
"monaco-editor": "^0.11.0",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12"
}
}

View file

@ -0,0 +1,27 @@
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
"app": './index.js',
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
},
plugins: [
new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs\/language\/typescript\/lib/)
],
};