monaco-editor封裝為vue npm庫后帘靡，使用庫時Uncaught (in promise) ChunkLoadError: Loading chunk 55 failed.

033713c39ef9

1.背景

之前做了一個基于monaco-editor的SQL編輯器支持語法關(guān)鍵字提示、高亮香到、數(shù)據(jù)庫表名字段提示的DEMO勾邦，托管到了github，最近發(fā)現(xiàn)好多人使用并私信問能否提供npm庫支持逗旁，于是乎便有了接下來封裝庫中遇到的問題。
基于微軟開源的monaco-editor(vscode開源核心庫)封裝一個Vue SQL編輯器名為monaco-sqlpad
npm:https://www.npmjs.com/package/monaco-sqlpad
github:https://github.com/DiscoverForever/monaco-sqlpad

2.問題復現(xiàn)步驟

安裝庫

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.語法關(guān)鍵字高亮不生效
2.編輯器icon亦無法顯示

問題截圖

image.png

3.問題定位

image.png

打開控制臺source發(fā)現(xiàn)monaco-sqlpad.umd.min.55.js chunk確實沒找到于是返回了模版html文件，導致monaco-editor在啟動webworker時出現(xiàn)解析錯誤片效。

4.嘗試解決

因為定位到chunk加載失敗红伦，所以首先檢查monaco-sqlpad庫打包publicPath是否有問題。

webpack配置

由于monaco-editor打包體積過大淀衣，所以使用了官方webpack插件monaco-editor-webpack-plugin

monaco-editor-webpack-plugin配置項

image.png

仔細閱讀monaco-editor-webpack-plugin配置項發(fā)現(xiàn)有一個publicPath默認為空,本以為修改為'/'問題到此結(jié)束了呢昙读，然而天不遂人愿，問題依舊

monaco-sqlpad vue.config.js(項目基于vue cli3創(chuàng)建)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者