baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.29k stars 2.51k forks source link

进入 amis-editor 编辑器后,vscode控制台报错:无法读取 file://xxxxxx #8368

Closed citynook closed 1 year ago

citynook commented 1 year ago

描述问题:

  1. 进入 amis-editor 编辑器后,vscode控制台报错:无法读取 file://xxxxxx 在错误信息指示的路径:node_modules.pnpm\monaco-editor@0.30.1\node_modules\monaco-editor\esm\vs\base\browser\dompurify 存在 dompurify.js 这个文件,不清楚为什么会发生这个错误。

  2. 编辑器的【代码】窗口中,将一些属性标识成不支持的属性。这个问题在官网代码中没有发生,在自建的项目中会发生,不清楚哪里没有正确加载 monaco-editor。

请问在自建的 vite3 项目中使用 amis-editor,要添加哪些引用才能正确地初始化 monaco-editor 组件并使用 amis-editor编辑器,确保【代码】窗口中能不会将正确的属性识别为不支持。本人使用 amis 编辑器使用的引用如下:

  import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd';
  import '@fortawesome/fontawesome-free/css/all.css';
  import '@fortawesome/fontawesome-free/css/v4-shims.css';
  import 'amis/lib/themes/cxd.css';
  import 'amis/lib/helper.css';
  import 'amis/sdk/iconfont.css';
  import 'amis-editor-core/lib/style.css';

  setThemeConfig(themeConfig);

截图或视频:

image

image

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? 在vite3 + vue 项目中,使用 veaury 组件加载 amis-editor 编辑器。

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在 amis: 3.4.2 amis-editor: 5.6.1 vite3: 4.4.9

项目 package.json 中添加和和amis相关的依赖:

    "@fortawesome/fontawesome-free": "^5.15.3",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.49.7",
    "monaco-editor":"0.30.1",
    "vite-plugin-monaco-editor": "1.1.0",
    "copy-to-clipboard": "3.3.1",
    "veaury": "2.3.12",
    "amis": "3.4.2",
    "amis-editor": "5.6.1"

vite.config.ts 中有正常初始化 monacoEditorPlugin 插件,并在 include 中添加了 monaco editor 依赖的引用,提前预加载

 import type { UserConfig, ConfigEnv } from 'vite';
import pkg from './package.json';
import dayjs from 'dayjs';
import { loadEnv } from 'vite';
import { resolve } from 'path';
import { generateModifyVars } from './build/generate/generateModifyVars';
import { createProxy } from './build/vite/proxy';
import { wrapperEnv } from './build/utils';
import { createVitePlugins } from './build/vite/plugin';
import { OUTPUT_DIR } from './build/constant';

function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir);
}

const { dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
};

export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();

  const env = loadEnv(mode, root);

  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  const viteEnv = wrapperEnv(env);

  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv;

  const isBuild = command === 'build';

  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        // /@/xxxx => src/xxxx
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
        {
          find: /@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
          find: /#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },
    server: {
      // Listening on all local IPs
      host: true,
      https: false,
      port: VITE_PORT,
      // Load proxy configuration from .env
      proxy: createProxy(VITE_PROXY),
    },
    build: {
      minify: 'esbuild',
      target: 'es2015',
      cssTarget: 'chrome80',
      outDir: OUTPUT_DIR,
      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
          entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
          // manualChunks配置 (依赖包从大到小排列)
          manualChunks: {
            'tinymce-vendor': ['tinymce'],
            'echarts-vendor': ['echarts'],
            'antd-vue-vendor': ['ant-design-vue','@ant-design/icons-vue','@ant-design/colors'],
            'vxe-table-vendor': ['vxe-table','vxe-table-plugin-antd','xe-utils'],
            'codemirror-vendor': ['codemirror'],
            //'emoji-mart-vue-fast': ['emoji-mart-vue-fast'],
            'jeecg-online-vendor': ['@jeecg/online'],
            // 将 Lodash 库的代码单独打包
            'lodash-es-vendor': ['lodash-es'],
            'html2canvas-vendor': ['html2canvas'],
            // vue vue-router合并打包
            vue: ['vue', 'vue-router'],
            'cron-parser-vendor': ['cron-parser'],
          },
        }
      },
      // 关闭brotliSize显示可以稍微减少打包时间
      reportCompressedSize: false,
      // 提高超大静态资源警告大小
      chunkSizeWarningLimit: 2000,
    },
    esbuild: {
      //清除全局的console.log和debug
      drop: isBuild ? ['console', 'debugger'] : [],
    },
    define: {
      // setting vue-i18-next
      // Suppress warning
      __INTLIFY_PROD_DEVTOOLS__: false,
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: generateModifyVars(),
          javascriptEnabled: true,
        },
      },
    },

    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    plugins: createVitePlugins(viteEnv, isBuild),
    // 预加载构建配置(首屏性能)
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2020',
      },
      exclude: [
        //升级vite4后,需要排除online依赖
        '@jeecg/online',
      ],
      // 提前预加载依赖,缩短首屏访问时间
      include: [
        '@vue/runtime-core',
        '@vue/shared',
        '@iconify/iconify',
        'ant-design-vue/es/locale/zh_CN',
        'ant-design-vue/es/locale/en_US',
        '@ant-design/colors',
        '@ant-design/icons-vue',
        '@vueuse/core',
        '@vueuse/shared',
        '@zxcvbn-ts/core',
        'ant-design-vue',
        'axios',
        'china-area-data',
        'clipboard',
        'codemirror',
        'codemirror/addon/fold/brace-fold.js',
        'codemirror/addon/fold/comment-fold.js',
        'codemirror/addon/fold/foldcode.js',
        'codemirror/addon/fold/foldgutter.js',
        'codemirror/addon/fold/indent-fold.js',
        'codemirror/addon/hint/anyword-hint.js',
        'codemirror/addon/hint/show-hint.js',
        'codemirror/addon/selection/active-line.js',
        'codemirror/mode/clike/clike.js',
        'codemirror/mode/css/css.js',
        'codemirror/mode/javascript/javascript.js',
        'codemirror/mode/markdown/markdown.js',
        'codemirror/mode/python/python.js',
        'codemirror/mode/r/r.js',
        'codemirror/mode/shell/shell.js',
        'codemirror/mode/sql/sql.js',
        'codemirror/mode/swift/swift.js',
        'codemirror/mode/vue/vue.js',
        'codemirror/mode/xml/xml.js',
        'cron-parser',
        'cropperjs',
        'crypto-js/aes',
        'crypto-js/enc-base64',
        'crypto-js/enc-utf8',
        'crypto-js/md5',
        'crypto-js/mode-ecb',
        'crypto-js/pad-pkcs7',
        'dom-align',
        'echarts',
        'echarts/charts',
        'echarts/components',
        'echarts/core',
        'echarts/renderers',
        'emoji-mart-vue-fast/src',
        'intro.js',
        'lodash-es',
        'md5',
        'nprogress',
        'path-to-regexp',
        'pinia',
        'print-js',
        'qrcode',
        'qs',
        'resize-observer-polyfill',
        'showdown',
        'sortablejs',
        'tinymce/icons/default/icons',
        'tinymce/plugins/advlist',
        'tinymce/plugins/anchor',
        'tinymce/plugins/autolink',
        'tinymce/plugins/autosave',
        'tinymce/plugins/code',
        'tinymce/plugins/codesample',
        'tinymce/plugins/contextmenu',
        'tinymce/plugins/directionality',
        'tinymce/plugins/fullscreen',
        'tinymce/plugins/hr',
        'tinymce/plugins/image',
        'tinymce/plugins/insertdatetime',
        'tinymce/plugins/link',
        'tinymce/plugins/lists',
        'tinymce/plugins/media',
        'tinymce/plugins/nonbreaking',
        'tinymce/plugins/noneditable',
        'tinymce/plugins/pagebreak',
        'tinymce/plugins/paste',
        'tinymce/plugins/preview',
        'tinymce/plugins/print',
        'tinymce/plugins/save',
        'tinymce/plugins/searchreplace',
        'tinymce/plugins/spellchecker',
        'tinymce/plugins/tabfocus',
        'tinymce/plugins/table',
        'tinymce/plugins/template',
        'tinymce/plugins/textcolor',
        'tinymce/plugins/textpattern',
        'tinymce/plugins/visualblocks',
        'tinymce/plugins/visualchars',
        'tinymce/plugins/wordcount',
        'tinymce/themes/silver',
        'tinymce/tinymce',
        'vditor',
        'vue',
        'vue-i18n',
        'vue-print-nb-jeecg/src/printarea',
        'vue-router',
        'vue-types',
        'vxe-table',
        'vxe-table-plugin-antd',
        'xe-utils',
        'xss',
        'monaco-editor/esm/vs/language/json/json.worker',
        'monaco-editor/esm/vs/language/css/css.worker',
        'monaco-editor/esm/vs/language/html/html.worker',
        'monaco-editor/esm/vs/language/typescript/ts.worker',
        'monaco-editor/esm/vs/editor/editor.worker',
      ],
    },
  };
};

createVitePlugins 方法中调用了下面代码,初始化 monaco editor。

import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export function configMonacoEditorPlugIn() {
  const plugin = monacoEditorPlugin({});

  return plugin;
}
  1. 粘贴有问题的完整 amis schema 代码:

    {
    "type": "page",
    "title": "新页面",
    "regions": [
    "body",
    "header"
    ],
    "body": [
    {
      "type": "input-text",
      "id": "u:e2ae7064723c",
      "label": "文本",
      "name": "text"
    },
    {
      "type": "crud",
      "syncLocation": false,
      "api": {
        "method": "get",
        "url": ""
      },
      "columns": [
        {
          "name": "id",
          "label": "ID",
          "type": "text",
          "id": "u:e6f59a01f1d8"
        },
        {
          "name": "engine",
          "label": "渲染引擎",
          "type": "text",
          "id": "u:bdccf1994b10"
        }
      ],
      "bulkActions": [],
      "itemActions": [],
      "id": "u:1c8a69ea7601"
    }
    ],
    "id": "u:c2e6ea3ff5d5"
    }
  2. 操作步骤 请简单描述一下复现的操作步骤...

github-actions[bot] commented 1 year ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

2betop commented 1 year ago

要不来个问题仓库?光看这些信息没办法排查

citynook commented 1 year ago

应该和 amis 无关,可能是 vscode 或 nodejs 版本的问题,找其它办法解决看看。