fix: use worker-loader correctly

resolve webpack-contrib/worker-loader#320
JounQin · Jun 15, 2021 · 4ebce63 · 4ebce63
1 parent 67faace
commit 4ebce63
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,7 +8,6 @@
 </template>
 <script lang="ts" setup>
 import type { editor } from 'monaco-editor'
-import { getDocumentSymbols } from 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols'
 
 import { MonacoEditor } from './components'
 
@@ -20,12 +19,13 @@ containers:
 `.trimStart()
 
 const onEditorChange = async (editor: editor.IStandaloneCodeEditor) => {
-  console.log(editor)
-
+  const { getDocumentSymbols } = await import(
+    'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols'
+  )
   editor.onDidChangeCursorSelection(async () => {
     const model = editor.getModel()
     console.log('model:', model)
-    const symbols = await getDocumentSymbols(model!, false, {
+    const symbols = await getDocumentSymbols(model!, true, {
       isCancellationRequested: false,
       onCancellationRequested: () => ({
         // eslint-disable-next-line @typescript-eslint/no-empty-function

diff --git a/src/components/monaco-editor/monaco-env.ts b/src/components/monaco-editor/monaco-env.ts
diff --git a/src/components/monaco-editor/setup-monaco.ts b/src/components/monaco-editor/setup-monaco.ts
@@ -1,8 +1,28 @@
 /// <reference types="monaco-yaml/lib/monaco" />
 
-import './monaco-env'
-
 export const setupMonaco = async () => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (window.monaco) {
+    return window.monaco
+  }
+
+  const [{ default: EditorWorker }, { default: YamlWorker }] =
+    await Promise.all([
+      // eslint-disable-next-line import/no-unresolved, import/no-webpack-loader-syntax
+      import('worker-loader!monaco-editor/esm/vs/editor/editor.worker'),
+      import('monaco-yaml/lib/esm/yaml.worker'),
+    ])
+
+  window.MonacoEnvironment = {
+    globalAPI: true,
+    getWorker(_: string, label: string) {
+      if (label === 'yaml') {
+        return new YamlWorker()
+      }
+      return new EditorWorker()
+    },
+  }
+
   const monaco = await import('monaco-editor/esm/vs/editor/edcore.main')
 
   // @ts-expect-error

diff --git a/src/shimd.d.ts b/src/shimd.d.ts
@@ -24,9 +24,11 @@ declare module 'monaco-editor/esm/vs/editor/edcore.main' {
 }
 
 declare module '*.worker' {
-  export = class _Worker extends Worker {
+  class _Worker extends Worker {
     constructor()
   }
+
+  export default _Worker
 }
 
 declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution' {}

diff --git a/src/utils/index.ts b/src/utils/index.ts
diff --git a/src/utils/timer.ts b/src/utils/timer.ts
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -1,13 +1,17 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin'
-import { Configuration } from 'webpack'
+import { DefinePlugin, Configuration } from 'webpack'
 import { VueLoaderPlugin } from 'vue-loader'
 
+const NODE_ENV = (process.env.NODE_ENV ?? 'development') as
+  | 'development'
+  | 'production'
+
+const isProd = NODE_ENV === 'production'
+
 const config: Configuration = {
-  mode:
-    (process.env.NODE_ENV as 'development' | 'production' | undefined) ??
-    'development',
+  mode: NODE_ENV,
   entry: './src/index.ts',
-  devtool: 'source-map',
+  devtool: isProd ? false : 'source-map',
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
   },
@@ -36,14 +40,22 @@ const config: Configuration = {
       {
         test: /\.worker\.[jt]s$/,
         loader: 'worker-loader',
+        exclude: require.resolve('monaco-editor/esm/vs/editor/editor.worker'),
       },
       {
         test: /\.ttf$/,
         loader: 'url-loader',
       },
     ],
   },
-  plugins: [new VueLoaderPlugin(), new HtmlWebpackPlugin()],
+  plugins: [
+    new DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin(),
+  ],
 }
 
 export default config