Add esbuild sample

pull/2791/head
Alex Dima
parent 3638651cde
commit 7318711606
No known key found for this signature in database
GPG Key ID: 39563C1504FDD0C9

@ -0,0 +1,3 @@
dist/**/*.js
dist/**/*.ttf
dist/**/*.css

@ -0,0 +1,45 @@
const esbuild = require('esbuild');
const path = require('path');
const { removeDir } = require('../../build/utils');
removeDir(path.join(__dirname, 'dist'));
const workerEntryPoints = [
'vs/language/json/json.worker.js',
'vs/language/css/css.worker.js',
'vs/language/html/html.worker.js',
'vs/language/typescript/ts.worker.js',
'vs/editor/editor.worker.js'
];
build({
entryPoints: workerEntryPoints.map((entry) => `../node_modules/monaco-editor/esm/${entry}`),
bundle: true,
format: 'iife',
outbase: '../node_modules/monaco-editor/esm/',
outdir: path.join(__dirname, 'dist')
});
build({
entryPoints: ['index.js'],
bundle: true,
format: 'iife',
outdir: path.join(__dirname, 'dist'),
loader: {
'.ttf': 'file'
}
});
/**
* @param {import ('esbuild').BuildOptions} opts
*/
function build(opts) {
esbuild.build(opts).then((result) => {
if (result.errors.length > 0) {
console.error(result.errors);
}
if (result.warnings.length > 0) {
console.error(result.warnings);
}
});
}

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script type="module" src="index.js"></script>
</body>
</html>

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor esbuild Bundler Sample</h2>
To run this sample, you need to:
<pre>
$/browser-esm-esbuild> npm run build
</pre
>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>

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

@ -0,0 +1,6 @@
{
"name": "helloworld",
"scripts": {
"build": "node ./build.js"
}
}
Loading…
Cancel
Save