时间戳

首页 > 解决方案 > 浏览器中的 babel 和 Monaco

javascript - 浏览器中的 babel 和 Monaco

问题描述

我从https://jsfiddle.net/developit/bwgkr6uq/获取代码，添加了 babeljs （我想让它在没有构建步骤的情况下工作）但是在使用 liveserver 测试后我得到一个空白屏幕：

    <head>
        <style>
            html, body, #container {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
    }
        </style>
    </head>
    <div id="container"></div>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script crossorigin>
        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
    window.MonacoEnvironment = { getWorkerUrl: () => proxy };

    let proxy = URL.createObjectURL(new Blob([`
      self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
      };
      importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
    `], { type: 'text/javascript' }));

    require(["vs/editor/editor.main"], function () {
      let editor = monaco.editor.create(document.getElementById('container'), {
        value: [
          'function x() {',
          '\tconsole.log("Hello world!");',
          '}'
        ].join('\n'),
        language: 'javascript',
        theme: 'vs-dark'
      });
      
      editor.addListener('didType', () => {
        console.log(editor.getValue());
      });
    });
    </script>

标签： javascriptbabeljsmonaco-editor

解决方案

推荐阅读