Как загрузить определение типа модуля npm в Монако с помощью Webpack и отреагировать create-react-app

Question

Я хотел загрузить некоторые определения типов модулей в Монако в приложение для реагирования в учебных целях.

Мне действительно удалось заставить его работать после долгой боли, но очень хакерским способом. Поэтому я не спрашиваю, как это сделать, а, скорее, как это делать правильно.

Часть, которую я надеюсь решить с помощью Webpack, заключается в том, что прямо сейчас я создал сценарий Node.js, который берет на себя все .d.ts файл, который он может найти в папке сборки частного модуля npm и сохранить их в большом файле.json.

в этом формате

{ [filePath]: 'fileContentAsString' }

Затем в ответ я импортирую этот json и вызываю addExtraLib для каждого.

for (const filePath in sdkTypesJson) {
  // We add every .d.ts file to Monaco
  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    sdkTypesJson[filePath],
    'file:///' + filePath.replace('dist/src/', '')
  );
}

Есть ли способ с помощью магии webpack, чтобы избежать создания файла json?

Answer 1

После двух дней боли и страданий это то, что я нашел, работает лучше всего.

const files = require.context('!!raw-loader!./node_modules/my-module-name/dist/src/', true, /\.d.ts$/);

files.keys().forEach((key: string) => {
  // We add every .d.ts file to Monaco
  Monaco.languages.typescript.typescriptDefaults.addExtraLib(
    files(key).default,
    'file:///node_modules/@adsk/fd-modeling-sdk/' + key.substr(2)
  );
});

require.contextскажите Webpack объединить все файлы с этого пути, которые соответствуют регулярному выражению. Здесь я получаю все.d.ts файлы, содержащие описание типа моего модуля.

!!raw-loader!сказать загрузить файл, не пытаясь его выполнить. Это приведет к сбою браузера. Вам необходимо установить модуль raw-loader для Webpack.

Затем у вас может быть такой код во встроенном экземпляре Monaco и набирать Intellisense, как если бы это было в vs-code.

import {
  function
} from '@my-module-name';

export default async function run(value: string) {
  alert('Code ran. Value passed is ' + value);
};

Вернувшись в код своего приложения, вы можете затем получить код из Монако и оценить его. В моем случае, когда пользователь нажимает кнопку "запустить" в приложении для реагирования.

const model = editor.current.getModel();

if (model && sdk.current && editorType === 'text') {
  // Be cool if Monaco worker could transpile the file to js. Don't work for some reason.
  // Monaco.languages.typescript.getTypeScriptWorker()
  //   .then(function(worker) {
  //     worker(model.uri)
  //       .then(function(client) {
  //         client.getEmitOutput(model.uri.toString()).then((output: any) => {
  //           console.log(output);
  //         });
  //       });
  //   });

  // @ts-ignore
  const js = window.ts.transpile(model.getValue());
  const setup = `const exports = { default: null };`;
  const final = setup + ' ' + js;

  try {
    const runMethod = eval(final);
    const newState = await runMethod('My value');
  } catch (error) {
    console.error(error);
    alert(error);
  }
}

Теоретически у вас должна быть возможность попросить работника машинописного текста из Монако перенести файл за вас, но мне не удалось заставить его работать.

Итак, я загрузил typescriptServices в моем файле реакции index.html с этой строкой.

<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>