將摩納哥編輯器集成到 ember 辛烷值中

Question

我嘗試將monaco 代碼編輯器集成到我的 ember 辛烷值應用程序中。 目前我正在使用 ESM 導入樣式並確認手冊，我安裝了 webpack 加載器插件並將其集成到我的 ember-cli-build.js 中

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        plugins: [
          new MonacoWebpackPlugin()
        ]
      }
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

但是在構建我的應用程序時，我總是收到錯誤消息：

模塊解析失敗：意外令牌 (8:0) 您可能需要一個適當的加載程序來處理此文件類型。

和

(node:7993) UnhandledPromiseRejectionWarning: E​​rror: webpack 返回錯誤給 ember-auto-import

誰能幫助我並告訴我如何將 monaco 正確集成到我的 ember 應用程序中？ 非常感謝！

Answer 1

我強烈建議使用ember-monaco而不是 monaco-editor，除非以下情況都是正確的：您已經成功使用了 Embroider，ember-monaco 缺少一個無法添加到該軟件包的關鍵功能，您可以付出巨大的努力在 Ember 應用程序中手動設置它（幾周）。

為了在 Ember 應用程序中使用 Webpack 插件，您還需要安裝和使用Embroider 。 常規的 ember-cli 構建根本不使用 Webpack，因此 Webpack 插件將不起作用。

如果您正在致力於直接使用摩納哥編輯器，你必須：

• 使用刺綉
• 安裝了 monaco-editor
• 安裝 Webpack 插件monaco-editor-webpack-plugin ，
• 安裝一個@cardstack/requirejs-monaco-ember-polyfill ( @cardstack/requirejs-monaco-ember-polyfill )，並按照自述進行注冊
• 注冊 webpack 插件並導入 css 文件

這是一個示例 ember-cli-build.js 文件：

'use strict';

process.env.BROCCOLI_ENABLED_MEMOIZE = 'true';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    prember: {
      // we're not pre-rendering any URLs yet, but we still need prember because
      // our deployment infrastructure already expects `_empty.html` to exist
      // for handling unknown URLs.
      urls: [],
    },
  });

  app.import('node_modules/monaco-editor/dev/vs/editor/editor.main.css');

  return (function() {
    const Webpack = require('@embroider/webpack').Webpack;
    const { join } = require('path');
    const { writeFileSync } = require('fs');

    return require('@embroider/compat').compatBuild(app, Webpack, {
      staticAddonTestSupportTrees: true,
      staticAddonTrees: true,
      staticHelpers: true,
      staticComponents: true,
      onOutputPath(outputPath) {
        writeFileSync(join(__dirname, '.embroider-app-path'), outputPath, 'utf8');
      },
      packagerOptions: {
        webpackConfig: {
          plugins: [new MonacoWebpackPlugin()],
        },
      },
// ...