Add typescript webpack sample

browser-esm-webpack-typescript/.gitignore

@@ -0,0 +1,9 @@
+dist
+lib
+logs
+*.log
+npm-debug.log*
+
+
+
+

browser-esm-webpack-typescript/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "monaco-esm-webpack-typescript",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "css-loader": "^2.1.1",
+    "html-webpack-plugin": "^3.2.0",
+    "monaco-editor": "^0.17.0",
+    "ts-loader": "^6.0.1",
+    "typescript": "^3.4.5",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1"
+  }
+}

browser-esm-webpack-typescript/src/index.css

@@ -0,0 +1,5 @@
+body {
+  width: 800px;
+  height: 600px;
+  border: 1px solid #ccc;
+}

browser-esm-webpack-typescript/src/index.ts

@@ -0,0 +1,26 @@
+import * as monaco from "monaco-editor";
+import "./index.css";
+
+// @ts-ignore
+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.body, {
+  value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
+  language: "typescript"
+});

browser-esm-webpack-typescript/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es5",
+    "outDir": "./dist",
+    "lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
+    "types": [],
+    "baseUrl": "./node_modules",
+    "jsx": "preserve",
+    "typeRoots": ["node_modules/@types"]
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules"]
+}

browser-esm-webpack-typescript/webpack.config.js

@@ -0,0 +1,40 @@
+const path = require("path");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    app: "./src/index.ts",
+    "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"
+  },
+  resolve: {
+    extensions: [".ts", ".js"]
+  },
+  output: {
+    globalObject: "self",
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist")
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      title: "Monaco Editor Sample"
+    })
+  ]
+};