Add esbuild sample
Alex Dima
3 years ago
parent
3638651cde
commit
7318711606
@ -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…
Reference in New Issue