支持sql語法提示的前端編輯器

magic-editor編輯器

magic-editor官網 ： https://microsoft.github.io/monaco-editor/

默認支持ts，js ，css ，html語法提示

支持sql提示 插件 monaco-sqlpad

sql語法提示插件monaco-sqlpad，gitbhu地址：https://github.com/laiweiwei/monaco-sqlpad

 

 

 

monaco-sqlpad會報錯：

 報錯：Uncaught (in promise) ChunkLoadError: Loading chunk 55 failed. 

   解決方案1：https://www.jianshu.com/p/1723eb6fbaeb

　解決方案2：https://www.jianshu.com/p/033713c39ef9

 

以上解決方案均測試無效

跟據以上方案反推得出問題所在：

　　原因時文件請求路徑問題，有的文件請求路徑可能需要加上 js/ ，或 fonts/ 

親測解決方案：1.找出沒找到的源文件的路徑地址，然后使用 copy-webpack-plugin 插件進行文件的轉移，使其請求文件的路徑符合文件所在位置

　　　　　　　　

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  lintOnSave:false,
  configureWebpack: {  
    plugins: [new CopyWebpackPlugin(
      {
        patterns: [
          // {
          //   context: 'node_modules/monaco-sqlpad/dist/',
          //   from: 'monaco-sqlpad.umd.min.55.js',
          //   to: 'js/',
          //   toType: 'dir'
          // },
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: 'monaco-sqlpad.umd.min.55.js',
            to: 'monaco-sqlpad.umd.min.55.js',
            toType: 'file'
          },
          {
            from: 'node_modules/monaco-sqlpad/dist/editor.worker.js',
            to: 'editor.worker.js',
            toType: 'file'
          },
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: 'fonts',
            to: 'fonts',
            toType: 'dir'
          }
        ]
      }
    )]
  }
}

 

完美解決！

  關於基於 magic-editor 封裝的 monaco-sqlpad插件拓展

將monaco-sqlpad，gitbhu地址：https://github.com/laiweiwei/monaco-sqlpad 克隆下來

在此基礎上進行修改

再次發布至自己的npm，然后安裝自己發布的npm包就行了