Webpack 将摩纳哥编辑器集成到ember辛烷中

我尝试将编辑器集成到我的ember octane应用程序中。目前我正在使用ESM导入样式，并根据手册确认，我安装了webpack loader插件，并将其集成到我的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） 您可能需要适当的加载程序来处理此文件类型

及

（节点：7993）未处理的PromisejectionWarning:错误：网页包向ember自动导入返回了错误

有谁能帮助我并告诉我如何将monaco正确集成到我的ember应用程序中吗？

---

多谢各位

我强烈建议您使用而不是monaco editor，除非以下情况都是正确的：您已经成功使用了Symbish，ember monaco缺少一个无法添加到该软件包中的关键功能，您可以投入大量精力在ember应用程序（周）中手动设置它

为了在Ember应用程序中使用Webpack插件，您还需要安装并使用。常规的ember cli构建根本不使用Webpack，因此Webpack插件将无法工作

如果您承诺直接使用monaco editor，您必须：

• 绣花
• 安装了摩纳哥编辑器吗
• 安装网页包插件

  摩纳哥编辑器网页包插件

• 安装polyfill（

  @cardstack/requirejs monaco ember polyfill

  ），然后按照自述文件注册
• 注册webpack插件并导入css文件

下面是一个示例ember-cli-build.js文件：

“严格使用”；
process.env.brocoli_ENABLED_MEMOIZE='true'；
const-EmberApp=require（'ember-cli/lib/brocoli/ember-app'）；
const MonacoWebpackPlugin=require（'monaco-editor-webpack-plugin'）；
module.exports=函数（默认值）{
让应用程序=新应用程序（默认值{
预告：{
//我们还没有预呈现任何URL，但我们仍然需要预呈现，因为
//我们的部署基础架构已经期望存在“\u empty.html”
//用于处理未知URL。
URL:[]，
},
});
app.import（'node_modules/monaco editor/dev/vs/editor/editor.main.css'）；
返回（函数（）{
const Webpack=require（'@symport/Webpack'）。Webpack；
const{join}=require（'path'）；
const{writeFileSync}=require（'fs'）；
返回要求（“@symport/compat”）.compatBuild（应用程序、网页包、{
staticAddonTestSupportTrees:true，
StaticAddContrees：是的，
是的，
静态组件：正确，
onOutputPath（outputPath）{
writeFileSync（join（uu dirname，.sympir app path'）、outputPath，'utf8'）；
},
包装选项：{
网页配置：{
插件：[新MonacoWebpackPlugin（）]，
},
},
// ...

我不确定这在当前的ember build管道中是否有效。你试过了吗？非常感谢你，这太棒了！我自己在哪里可以找到这么好的信息？不客气@andreas.teich！这不是你可以通过谷歌搜索找到的东西-你只是幸运地发现我以前做过。摩纳哥是其中之一最复杂的前端库，这是你只能从其他人那里获得的信息，或者你自己通过几周的调试来获得的信息。好消息是，你在Ember或任何其他框架中使用的几乎所有其他npm包都比这容易得多。