monaco-editor封装为vue npm库后，使用库时Uncaught (in promise) ChunkLoadError: Loading chunk 55 failed.

033713c39ef9

1.背景

之前做了一个基于monaco-editor的SQL编辑器支持语法关键字提示、高亮、数据库表名字段提示的DEMO，托管到了github，最近发现好多人使用并私信问能否提供npm库支持，于是乎便有了接下来封装库中遇到的问题。
基于微软开源的monaco-editor(vscode开源核心库)封装一个Vue SQL编辑器名为monaco-sqlpad
npm:https://www.npmjs.com/package/monaco-sqlpad
github:https://github.com/DiscoverForever/monaco-sqlpad

2.问题复现步骤

安装库

npm i monaco-sqlpad --save

使用

<template>
  <div>
    <monaco-sqlpad v-model="sql" :width="500" :height="500" />
  </div>
</template>
<script>
import MonacoSqlpad from 'monaco-sqlpad'
export default {
  data() {
    return {
      sql: null
    }
  },
  components: {
    MonacoSqlpad
  }
}
</script>

问题描述

1.语法关键字高亮不生效
2.编辑器icon亦无法显示

问题截图

image.png

3.问题定位

image.png

打开控制台source发现monaco-sqlpad.umd.min.55.js chunk确实没找到于是返回了模版html文件，导致monaco-editor在启动webworker时出现解析错误。

4.尝试解决

因为定位到chunk加载失败，所以首先检查monaco-sqlpad库打包publicPath是否有问题。

webpack配置

由于monaco-editor打包体积过大，所以使用了官方webpack插件monaco-editor-webpack-plugin

monaco-editor-webpack-plugin配置项

image.png

仔细阅读monaco-editor-webpack-plugin配置项发现有一个publicPath默认为空,本以为修改为'/'问题到此结束了呢，然而天不遂人愿，问题依旧

monaco-sqlpad vue.config.js(项目基于vue cli3创建)

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const path = require('path')
module.exports = {
  productionSourceMap: false,
  css: {
    extract: false,
    sourceMap: false
  },
  publicPath: './',
  configureWebpack: {
    plugins: [new MonacoWebpackPlugin({
      languages: ['sql'],
      features: [],
      publicPath: '/'
    })]
  }
}

monaco-sqlpad package.json

{
  "name": "monaco-sqlpad",
  "version": "1.0.44",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name monaco-sqlpad src/index.js",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "main": "dist/monaco-sqlpad.umd.min.js",
  "dependencies": {
    "core-js": "^2.6.5",
    "monaco-editor": "^0.20.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "lint-staged": "^8.1.5",
    "monaco-editor-webpack-plugin": "^1.9.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.10"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

最后编辑于：2020.06.01 15:35:22