Импорт редактора Монако с использованием require js

Я установил Monaco-редактор, используя

npm install monaco-editor

теперь я хочу требовать в моем файле JS

поэтому я попытался потребовать использования

var monaco = require('monaco-editor');

но это дает мне модуль не найдена ошибка.

Что-то не так я делаю?

Источник

3 ответа

Они только что выпустили дистрибутив ESM, совместимый с веб-пакетом и т. Д. Посмотрите документы здесь.

Также есть много примеров использования Монако с Webpack, посылки и так далее. Увидеть все.

Источник

Monaco-редактор использует собственный загрузчик модулей в стиле AMD. loader.js приведет к тому, что глобальное требование будет установлено на загрузчик Monaco-редактора.

В примерах GitHub есть много примеров использования редактора в разных контекстах.

Узнайте, как они решают вашу проблему, в файлах примеров Electorn index.html. После сохранения пользовательского загрузчика Monaco-editor вы будете использовать его, как в большинстве примеров. Это загрузчик в стиле AMD, поэтому синтаксис отличается от узла var me = require('monaco'), Я не уверен, возможно ли использовать как загрузчик узлов, но после загрузки loader.js и сохранения требования к некоторой переменной, такой как amdRequire, вы будете использовать, например:

amdRequire(['vs/editor/editor.main'], function () 
{ 
    // your code using monaco ns here
    monaco.editor.create( document.getElementById('elementId'), {} );
})
Источник

В моем случае я пытаюсь загрузить редактор Monaco в приложение nw.js, в котором есть require.js.

Обычно в примерах Monaco Editor рекомендуется использовать свой «Loader.js». Но если у вас уже есть другой загрузчик amd (например, require.js), вам не нужно включать и использовать загрузчик Monaco's Loader.js. Из этого комментария Github я узнал, что Monaco Loader.js ничего не сделает, если обнаружит другой загрузчик amd.

Этот официальный образец может быть полезен.

      
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <h2>Monaco Editor Sample - Loading with requirejs</h2>
        <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
            integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
            crossorigin="anonymous"
        ></script>
        <script>
            require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });

            require(['vs/editor/editor.main'], function () {
                var editor = monaco.editor.create(document.getElementById('container'), {
                    value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                    language: 'javascript'
                });
            });
        </script>
    </body>
</html>
Источник
Другие вопросы по тегам