Создайте свою собственную онлайн-IDE

Node.js
Создайте свою собственную онлайн-IDE

Источник изображения:UN splash.com/photos/842 О…

Автор этой статьи:Тан Цзянхун

задний план

За последние несколько месяцев я реализовал проект по обмену компонентами/блоками между кросс-интерфейсными проектами в компании.Bitразработан на основе . Основная цель Bit — реализация различных проектовобщийа такжеСинхронизироватьКомпоненты/блоки, общая идея такова:

В проекте A исходный код компонентов/блоков, которые необходимо совместно использовать, передается на удаленное хранилище путем выполнения инструмента командной строки, предоставляемого Bit, а затем в проекте B также может использоваться инструмент командной строки, предоставляемый Bit. извлекать и хранить его на удаленном складе Bit.components/blocks. Это больше похоже на Git, но основное отличие состоит в том, что Bit не только проталкивает исходный код, но также включает в себя анализ графа зависимостей компонентов, управление версиями компонентов и другие функции. Следующая картинка описывает идею реализации Bit. Для получения более подробной информации см. официальную документацию Bit.Bit-Docs

Bit 原理图.png

Хотя у Bit есть инструменты командной строки с открытым исходным кодом, нет сайта для отображения общих компонентов / блоков с открытым исходным кодом, аналогичного официальному веб-сайту, предоставленному Bit.bit.dev. Другими словами, пользователь не может найти код компонента/блока, хранящийся в удаленном репозитории Bit, просматривая построенное представление компонента/блока. Действие сайта Bit заключается в следующем:

Bit 网站效果图.png

Затем вам нужно реализовать аналогичный веб-сайт самостоятельно, и тогда вы обнаружите, что наиболее сложной частью является реализация онлайн-среды IDE для отображения кода компонентов/блоков и поддержки построения кода в реальном времени и захвата встроенных скриншотов страниц и других функций. . Эффект следующий:

在线 IDE 效果图.png

Проблемы с использованием доступных в настоящее время онлайн-сред IDE

Увидев это, у вас может возникнуть вопрос, а почему нельзя напрямую использовать существующую бесплатную онлайн-IDE? НапримерCodeSandbox,CodePen,StackblitzЖдать. Основные причины следующие:

  1. Для компаний определенного размера у них будут свои собственные частные источники npm, и онлайновые IDE не могут получить эти пакеты npm;

  2. Некоторые специфические конфигурации при построении интерфейсных проектов не могут поддерживаться существующими онлайн-средами IDE;

    Например, CodeSandbox может задавать только тип шаблона сборки, такой как create-react-app, и не предоставляет API для внешнего изменения конкретных конфигураций сборки. Например, в проекте используется файл меньшего размера, и этот тип файла нельзя собрать, выбрав шаблон create-react-app.

  3. Специальные функции не могут быть реализованы, например, нажав кнопку страницы, вы можете сделать снимок экрана страницы, созданной в правой части онлайн-IDE, и передать данные изображения;

  4. Использование услуг, предоставляемых онлайн-средой разработки, обычно означает, что ваши компоненты/блоки доступны в общедоступном Интернете, однако некоторые коды могут быть засекречены и не могут быть загружены в общедоступный Интернет.

  5. Некоторые инструменты сборки зависят от таких файлов, как node_modules, и не будут работать должным образом в браузерах без node_modules. Например, плагин babel и т. д. Это будет подробно объяснено в разделе пользовательской функции CodeSandbox ниже.

Поэтому нам нужно создать собственную онлайн-среду IDE для решения упомянутых выше проблем. Дальше есть два пути: один — разработать онлайн-IDE полностью с нуля, а другой — найти проект с открытым исходным кодом и настроить его на этой основе.

Сначала автор решил разработать его самостоятельно, но после разработки в течение определенного периода времени я обнаружил, что для реализации IDE и по сравнению с существующими продуктами требуется много усилий, как с точки зрения многофункциональности, так и простоты использования. они были полностью разбиты. Кроме того, то, чего автор в основном хочет достичь, — это платформа, которую можно повторно использовать в блоках внешнего интерфейса, а онлайн-среда разработки — это лишь один из несущественных компонентов (Примечание: на самом деле исходный код общих компонентов /blocks также можно разместить прямо на странице Display, различая по номенклатуре компонентов/блоков, хотя такой подход действительно очень низкий). Итак, в конце концов, я решил разрабатывать на основе онлайн-среды разработки с открытым исходным кодом.

Основы CodeSandbox

В основном автор изучаетCodesandboxтак же какStackblitz. Это два коммерческих проекта.Основная часть Stackblitz не имеет открытого исходного кода, и большинство функций CodeSandbox имеют открытый исходный код, поэтому в конечном итоге был выбран CodeSandbox.

Чтобы облегчить последующее объяснение того, как настроить и развернуть CodeSandbox, вот краткий обзор его основных принципов (В основном цитируется нижеКак работает CodeSandbox, часть 1часть):

Самая большая особенность CodeSandbox заключается в том, что проект создается на стороне браузера, а это означает, что упаковка и запуск не зависят от сервера. Поскольку на стороне браузера нет среды Node, CodeSandboxРеализована упрощенная версия веб-пакета, которая может работать на стороне браузера..

Компоненты CodeSandbox

Как показано на рисунке ниже, CodeSandbox в основном состоит из трех частей:

CodeSandbox 的组成.png

  • Редактор Редактор: в основном используется для редактирования кода. Песочница будет уведомлена о переводе после изменения кода.

  • Код песочницы запускает песочницу: запускать в отдельном iframe, отвечающем за компиляцию кода Transpiler и запуск Evalation

  • Упаковщик npm онлайн-упаковщик: Предоставляет песочнице содержимое файлов в пакете npm.

Процесс сборки проекта CodeSandbox

Процесс сборки в основном включает три этапа:

  • Упаковщик -- этап упаковки пакетов npm: Загрузите пакет npm и рекурсивно найдите все файлы, на которые есть ссылки, а затем передайте их на следующий этап для компиляции.

  • Транспиляция - этап компиляции: скомпилировать весь код, построить график зависимостей модуля

  • Этап оценки -- выполнения: Используйте eval для запуска скомпилированного кода для предварительного просмотра проекта.

Упаковщик -- этап упаковки пакетов npm

Реализация кода для этапа Packager находится в репозитории CodeSandbox, размещенном на GitHub.dependency-packager, который основан наexpressСервис, предоставляемый платформой, и развертывание используют бессерверный (на основе AWS Lambda) метод, который делает сервис Packager более масштабируемым и может гибко справляться со сценариями с высокой степенью параллелизма. (Примечание. Если в частном развертывании нет бессерверной среды, вы можете закомментировать все части AWS Lambda в исходном коде.)

Возьмем в качестве примера реактивный пакет, чтобы объяснить принцип службы Packager.Сначала экспресс-фреймворк получает имя пакета и версию пакета в запросе, напримерreact@16.8.0.Затем загрузите пакеты зависимостей react и react на диск через пряжу, найдите файл записи пакета npm, прочитав поля браузера, модуля, main, unpkg и другие в файле package.json пакета npm, а затем проанализируйте все операторы require в AST, добавьте необходимое содержимое файла в файл манифеста и рекурсивно выполните шаги прямо сейчас и, наконец, сформируйте граф зависимостей. Таким образом достигается цель переноса содержимого файла пакета npm в manifest.json, а также достигается цель устранения избыточных файлов в модуле npm.. Наконец, вернитесь в песочницу для компиляции. Ниже приведен пример файла манифеста:

{
    // 模块内容
    "contents": {
        "/node_modules/react/index.js": {
            "content": "'use strict';↵↵if ....", // 代码内容
            "requires": [ // 依赖的其他模块
                "./cjs/react.development.js",
            ],
        },
        //...
    },
    // 模块具体安装版本号
    "dependencies": [{
        name: "@babel/runtime",
        version: "7.3.1"
    }, /*…*/ ],
    // 模块别名, 比如将react作为preact-compat的别名
    "dependencyAliases": {},
    // 依赖的依赖, 即间接依赖信息. 这些信息可以从yarn.lock获取
    "dependencyDependencies": {
        "object-assign": {
            "entries": ["object-assign"], // 模块入口
            "parents": ["react", "prop-types", "scheduler", "react-dom"], // 父模块
        }
        //...
    }
}

Стоит отметить, чтобы увеличить скорость онлайн-упаковки NPM, а автор CodeSandbox использует службу облачного хранения S3, предоставленную AWS. Когда была упакована версия пакета NPM, результат пакета будет упакован -manifest.jsonФайл хранится на S3. В следующий раз, когда вы запросите ту же версию пакета, вы можете напрямую вернуть сохраненнуюmanifest.jsonфайл, не повторяя описанный выше процесс. В частном развертывании вы можете заменить S3 собственной службой хранения файлов.

Транспиляция - этап компиляции

Когда Sandbox получает исходный код, зависимости npm и шаблоны сборки внешнего проекта из предустановки редактора.Песочница инициализирует конфигурацию, затем загрузит файл манифеста, соответствующий пакету зависимостей npm, из службы Packager, затем скомпилирует проект из входного файла внешнего проекта и проанализирует AST для рекурсивной компиляции необходимых файлов для формирования график зависимости(Примечание: это в основном то же самое, что и принцип веб-пакета).

Примечание Поддержка CodeSandbox для внешних проектов для создания предопределенных шаблонов Preset. Предустановка предусматривает определенный тип файла, использование которого Transpiler (аналог Webpack Loader) для компиляции файла. В настоящее время вы можете выбрать параметры предустановки:vue-cli,create-react-app,create-react-app-typescript,parcel,angular-cli,preact-cli. Однако изменение конкретной конфигурации в пресете, встроенном в исходный код CodeSandbox, не поддерживается. Конкретный пример конфигурации Preset выглядит следующим образом:

import babelTranspiler from "../../transpilers/babel";
...

const preset = new Preset(
  "create-react-app",
  ["web.js", "js", "json", "web.jsx", "jsx", "ts", "tsx"], {
    hasDotEnv: true,
    setup: manager => {
      const babelOptions = {...};
      preset.registerTranspiler(
        module =>
          /\.(t|j)sx?$/.test(module.path) && !module.path.endsWith(".d.ts"),
        [{
          transpiler: babelTranspiler,
          options: babelOptions
        }],
        true
      );
      ...
    }
  }
);

Этап оценки -- выполнения

Фаза выполнения оценки начинается с скомпилированного модуля, соответствующего файлу записи проекта, и рекурсивно вызывает eval для выполнения всех модулей, на которые ссылаются.

Поскольку в этой статье в основном описывается, как создать собственную онлайн-среду IDE, дополнительные сведения о реализации CodeSandbox можно найти в следующих статьях:

Частное развертывание CodeSandbox

После понимания основных принципов CodeSandbox следующим шагом будет переход к основному содержанию этой статьи: как развернуть CodeSandbox в частном порядке.

Онлайн-сервис упаковки Packager

Первый — это онлайн-сервис упаковки npm.dependency-packager. Автор развернул его на собственном сервере через зеркалирование.

Следующим шагом является изменение источника npm на частный источник npm компании.Есть два способа.Первый – изменить образ глобально с помощью команды npm config, такой как следующий файл Dockerfile:

FROM node:12-alpine

COPY . /home/app

# 设置私有 npm 源
RUN cd /home/app && npm config set registry http://npm.xxx.com && npm install -f

WORKDIR /home/app

CMD ["npm", "run", "dev"]

Второй способ — добавить параметры после команды загрузки npm-пакета через пряжу в исходный код--registry=http://npm.xxx.com, соответствующий код находится вfunctions/packager/dependencies/install-dependencies.tsв файле.

Кроме того, сервис полагается на серверу Serverless, предоставленную AWS Lambda, и использует службу хранения S3, предоставленную AWS, чтобы кэшировать результаты упаковки пакетов NPM. Если у читателя нет этих служб, вы можете прокомментировать эту часть исходного кода или заменить его соответствующими службами других поставщиков облачных вычислений.dependency-packagerСервис узла по сути является рамочной экспресс-экспресс, вы можете просто запустить непосредственно на сервере.

Редактор Редактор

в проекте CodeSandbox-клиентstandalone-packages/react-sandpackПроекты на базе CodeSandboxreactРеализованы элементы редактора. В отличие от редактора, реализованного в основном проекте, этот редактор в основном предназначен для настройки для пользователей, поэтому реализация относительно проста, и пользователи могут добавлять необходимые им функции на основе этого редактора в соответствии со своими потребностями. Конечно, если нет необходимости в пользовательском редакторе, вы можете напрямую использовать пакет npm, соответствующий проекту react-sandpack.react-smooshpack, использовать следующим образом:

import React from 'react';
import { render } from 'react-dom';
import {
  FileExplorer,
  CodeMirror,
  BrowserPreview,
  SandpackProvider,
} from 'react-smooshpack';
import 'react-smooshpack/dist/styles.css';

const files = {
  '/index.js': {
    code: "document.body.innerHTML = `<div>${require('uuid')}</div>` ",
  },
};

const dependencies = {
  uuid: 'latest',
};

const App = () => (
  <SandpackProvider 
      files={files} 
      dependencies={dependencies} 
      entry="/index.js" 
      bundlerURL= `http://sandpack-${version}.codesandbox.io` >
    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
      <FileExplorer style={{ width: 300 }} />
      <CodeMirror style={{ flex: 1 }} />
      <BrowserPreview style={{ flex: 1 }} />
    </div>
  </SandpackProvider>
);

render(<App />, document.getElementById('root'));

Подкомпоненты FileExplorer, CodeMirror и BrowserPreview — это дерево каталогов файлов слева, область редактирования кода посередине и область предварительного просмотра страницы после сборки проекта справа.

Глядя на исходный код этой независимой библиотеки, мы можем знать, что в дополнение к этим трем подкомпонентам SandpackProvider вставит еще один тег iframe, который в основном используется для отображения страницы после сборки проекта, и компонент Preview справа. Компонент области предварительного просмотра BrowserPreview будет вставлен в собственный узел, чтобы реализовать цель отображения страницы, созданной проектом, в реальном времени.

BundlerUrl, загруженный iframe, по умолчанию соответствует официально предоставленному адресу.http://sandpack-${version}.codesandbox.io, сервис, соответствующий этому доменному имени, на самом деле является ядром CodeSandbox — сервиса для сборки фронтенд-проектов на стороне браузера, общий принцип только что был объяснен. В следующем разделе объясняется, как заменить официальную службу сборки собственной.

Что касается того, как синхронизировать код/зависимость области редактирования кода со службой сборки, загруженной в iframe, на самом деле это зависит от другой независимой библиотеки, sandpack (тот же каталог, что и react-sandpack), и в коде есть класс Manager область редактирования и правая сторона Чтобы создать мост между службами сборки в области предварительного просмотра, метод отправки, предоставляемый пакетом codeandbox-api, в основном используется для связи между редактором и службой сборки.

Запуск кода Песочница Песочница

Боюсь недопонимания, позвольте мне заранее объяснить, что сервис построения, упомянутый в предыдущем разделе, не является серверным сервисом, этот сервис на самом деле является фронтенд-страницей, созданной CodeSandbox. В разделе основных принципов уже объяснялось, что CodeSandbox фактически реализует веб-пакет в браузере, и вся конструкция проекта выполняется в браузере.

И каталог основной части сборки интерфейса CodeSandbox находится в проекте CodeSandbox-client.packages/appProject, принцип работы которого был объяснен выше, здесь нужно только развернуть созданную проектом папку www на сервер. Поскольку базовая библиотека зависит от других библиотек, зависимые библиотеки также должны быть собраны в первую очередь. Ниже автор написал файл build.sh, который можно разместить в каталоге первого уровня всего проекта.

# # 运行和构建需要 Node 10 环境
# nvm use 10

# 安装依赖
yarn

# 构建依赖库
yarn run build:deps

# 进入到核心库 packages/app 进行构建
cd packages/app

yarn run build:sandpack-sandbox

# 由于一些原因，一些需要的静态文件需要从整体项目的构建目录中获取
# 因此需要在执行该 shell 脚本之前，将整个项目构建一次，即执行 npm run build 即可（这个构建的时间会比较久）
cp -rf ../../www/static/* ./www/static

После выполнения приведенного выше сценария оболочки продукт www, созданный в каталоге packages/app, может быть развернут на сервере.Автор использует развертывание контейнера.Ниже приведено содержимое файла dockerfile.

FROM node:10.14.2 as build

WORKDIR /

ADD . .

RUN /bin/sh build.sh

FROM nginx:1.16.1-alpine

COPY --from=build /packages/app/www /usr/share/nginx/html/

Обратите внимание, что образ строится поэтапно, то есть сначала строится проект CodeSandbox, а затем строится образ. Но на практике оказалось, что проект CodeSandbox не очень гладко собирается на сервере, поэтому в конце концов я выбираю сборку проекта локально, а затем загружаю продукты сборки в удаленный репозиторий git, так что нужно только изображение. быть построенным и запущенным на упаковщике.

Все развертывание было вдохновлено проблемой в официальном репозитории GitLab:GitLab hosted Codesandbox

Настройка функций CodeSandbox

В последнем разделе у читателей может возникнуть вопрос, зачем напрямую использовать службу сборки по умолчанию, предоставляемую CodeSandbox? По сути, это настройка процесса построения CodeSandbox.Далее для иллюстрации приведены четыре примера.

Замените функцию плагина babel, автоматически вводимую стилями компонентов.

Для собственной библиотеки компонентов компании обычно разрабатываются плагины типа babel-plugin-import, так что нет необходимости вводить дополнительные файлы стилей для компонентов при использовании компонентов в коде. in будет автоматически вставлен на этапе компиляции js Введите код стиля. Но такому плагину может потребоваться пройтись, есть ли другие компоненты в зависимостях в package.json компонента, и если да, то написать введение файлов стилей других компонентов в скомпилированный js, и выполнить процесс только что рекурсивно. Здесь вам нужно прочитать соответствующие файлы в node_modules. Но такие вещи, какCodeSandbox,Stackblitzи т.д. все встроено в браузер, и нет node_modules.

В ответ на эту проблему автор окончательно отказался от метода использования подключаемого модуля babel для вставки и импорта кода файла стиля на этапе компиляции js, но получил файл стиля компонента из онлайн-сервиса упаковки npm во время кода. текущей стадии, а затем передал содержимое файла стиля через тег стиля, который динамически вставляется над тегом заголовка. Вот конкретные изменения:

Сторона службы онлайн-упаковки npm

Онлайн-сервис упаковки npm обычно возвращает только js-файлы, поэтому необходимо добавить в сервис функцию: когда выясняется, что запрошенный пакет npm является встроенным компонентом, также возвращается дополнительный файл стиля. Нижеdependence-packagerОсновной код добавлен в проект:

Чтобы обеспечить способ получения файлов стилей частных компонентов, вы можетеfunctions/packager/utilsСоздайте новый файл в каталогеfetch-builtin-component-style.ts, основной код выглядит следующим образом:

// 根据组件 npm 包名以及通过 yarn 下载到磁盘上的 npm 包路径，读入对应的样式文件内容，并写入到 manifest.json 的 contents 对象上
const insertStyle = (contents: any, packageName: string, packagePath: string) => {
  const stylePath = `node_modules/${packageName}/dist/index.css`;
  const styleFilePath = join(
    packagePath,
    `node_modules/${packageName}/dist/index.css` ,
  );

  if (fs.existsSync(styleFilePath)) {
    contents[stylePath] = {
      contents: fs.readFileSync(styleFilePath, "utf-8"),
      isModule: false,
    };
  }
};

// 获取内建组件的样式文件，并写入到返回给 Sandbox 的 manifest.json 文件中
const fetchBuiltinComponentStyle = (
  contents: any,
  packageName: string,
  packagePath: string,
  dependencyDependencies: any,
) => {
  // 当 npm 包或者其依赖以及依赖的依赖中有内建组件，则将该内建组件对应的样式文件写入到 manifest.json 文件中
  if (isBuiltinComponent(packageName)) {
    insertStyle(contents, packageName, packagePath);
  }

  Object.keys(dependencyDependencies.dependencyDependencies).forEach(
    (pkgName) => {
      if (isBuiltinComponent(pkgName)) {
        insertStyle(contents, pkgName, packagePath);
      }
    },
  );
};

И вfunctions/packager/index.tsвызовите этот метод в файле. код показывает, как показано ниже:

+  // 针对私有组件，将组件样式文件也写到返回给浏览器的 manifest.json 文件中
+  fetchBuiltinComponentStyle(
+    contents,
+    dependency.name,
+    packagePath,
+    dependencyDependencies,
+  );

// 作为结果返回
const response = {
  contents,
  dependency,
  ...dependencyDependencies,
};

Сторона кода браузераSandbox

Сторона браузера CodeSandbox должна предоставлять метод обработки стилей частных компонентов, в основном на этапе выполнения оценки, чтобы динамически вставлять содержимое файла стиля в тег заголовка через тег стиля.packages/app/src/sandbox/eval/utilsСоздайте новый файл в каталогеinsert-builtin-component-style.ts, следующий основной код:

// 基于样式文件内容创建 style 标签，并插入到 head 标签上
const insertStyleNode = (content: string) => {
  const styleNode = document.createElement('style');
  styleNode.type = 'text/css';
  styleNode.innerHTML = content;
  document.head.appendChild(styleNode);
}

const insertBuiltinComponentStyle = (manifest: any) => {
  const { contents, dependencies, dependencyDependencies } = manifest;

  // 从依赖以及依赖的依赖中根据 npm 包名筛选出内建组件
  const builtinComponents = Object.keys(dependencyDependencies).filter(pkgName => isBuiltinComponent(pkgName));
  dependencies.map((d: any) => {
    if (isBuiltinComponent(d.name)) {
      builtinComponents.push(d.name);
    }
  });

  // 根据基于内建组件 npm 名称拼装成的 key 查找到具体的文件内容，并调用 insertStyleNode 方法插入到 head 标签上
  builtinComponents.forEach(name => {
    const styleContent = contents[`/node_modules/${name}/dist/index.css`];
    if (styleContent) {
      const { content } = styleContent;
      if (content) {
        insertStyleNode(content);
      }
    }
  });
}

И вызовите этот метод на этапе выполнения оценки, связанные файлы находятся вpackages/sandpack-core/src/manager.ts, конкретная модификация выглядит следующим образом:

...
setManifest(manifest?: Manifest) {
  this.manifest = manifest || {
    contents: {},
    dependencies: [],
    dependencyDependencies: {},
    dependencyAliases: {},
  };

+  insertBuiltinComponentStyle(this.manifest);
  ...
}
...

Добавить функцию скриншота области предварительного просмотра

В проекте платформы повторного использования блоков при нажатии на кнопку сохранения нужно не только сохранить отредактированный код, но и сделать скриншот построенной области предварительного просмотра справа и сохранить его. Как показано ниже:

ide 截图功能

Содержимое, отображаемое в области предварительного просмотра справа, представляет собой iframe, вставленный компонентом SandpackProvider, поэтому вам нужно только найти этот iframe, а затем связаться со страницей внутри iframe через postMessage. Когда внутренняя страница iframe получает команду скриншота, она может сделать скриншот текущего dom и отправить его.Здесь автор использует html2canvas для создания скриншота. Ниже приведена модификация кода на стороне CodeSandbox, файл находится вpackages/app/src/sandbox/index.jsВ основном добавьте следующий код в конце файла:

const fetchScreenShot = async () => {
  const app = document.querySelector('#root');
  const c = await html2canvas(app);
  const imgData = c.toDataURL('image/png');
  window.parent.postMessage({
    type: 'SCREENSHOT_DATA',
    payload: {
      imgData
    }
  }, '*');
};

const receiveMessageFromIndex = (event) => {
  const {
    type
  } = event.data;
  switch (type) {
    case 'FETCH_SCREENSHOT':
      fetchScreenShot();
      break;
    default:
      break;
  }
};

window.addEventListener('message', receiveMessageFromIndex, false);

На стороне CodeSandbox вам нужно отправить команду скриншота в iframe, когда вам нужно сделать снимок экрана. В то же время также необходимо отслеживать сообщение, отправленное iframe, отфильтровывать команду для возврата данных снимка экрана и получать данные снимка экрана. Поскольку реализация относительно проста, конкретный код здесь не показан.

Добавлена ​​поддержка компиляции меньшего количества файлов в шаблоне create-реагировать-приложение.

В основном, чтобы внести некоторые изменения в конфигурацию предустановленного приложения create-react-app, адрес файлаpackages/app/src/sandbox/eval/presets/create-react-app/v1.ts. Измените код следующим образом:

...
+  import lessTranspiler from '../../transpilers/less';
+  import styleProcessor from '../../transpilers/postcss';

export default function initialize() {
  ...
  +  preset.registerTranspiler(module => /\.less$/.test(module.path), [
  +    { transpiler: lessTranspiler },
  +    { transpiler: styleProcessor },
  +    {
  +      transpiler: stylesTranspiler,
  +      options: { hmrEnabled: true },
  +    },
  +  ]);
  ...
}

Измените адрес службы упаковки npm, запрошенный CodeSandbox.

Вы можете заменить службу, упакованную с помощью npm, на службу, развернутую в частном порядке выше, чтобы решить такие проблемы, как невозможность получить частные пакеты npm. Соответствующие документы находятся вpackages/sandpack-core/src/npm/preloaded/fetch-dependencies.ts. Измените код следующим образом:

 const PROD_URLS = {
   ...
//  替换成自己的在线 npm 打包服务即可
-  bucket: 'https://prod-packager-packages.codesandbox.io',
+  bucket: 'http://xxx.xxx.com'
 };
...
function dependencyToPackagePath(name: string, version: string) {

-  return `v${VERSION}/packages/${name}/${version}.json` ;
+  return `${name}@${version}` ;

}

Эти четыре примера закончены, и читатели могут настроить другие в соответствии со своими потребностями. Когда вы поймете механизм работы всей CodeSandbox, вы обнаружите, что настройка не так уж и сложна.

заключительные замечания

На данный момент цель приватизации и развертывания онлайновой IDE, которую можно настраивать по желанию, достигнута. Конечно, построение проекта онлайн-IDE не ограничивается только браузером, весь процесс построения также может быть размещен на стороне сервера.Благодаря возможностям облака + контейнеризации онлайн-IDE имеет практически те же функции, что и локальная IDE. На самом деле сценариев для этих двух приложений не так много: полностью браузерное построение больше подходит для предпросмотра одностраничных проектов в реальном времени, тогда как серверное построение полностью применимо к реальной разработке проекта и не ограничивается фронтовые проекты. Автор также пытается изучить возможность создания IDE на основе сервера, и я с нетерпением жду возможности поделиться с вами некоторыми выводами позже.

Далее, если читателю интересно, вы можете продолжить чтение проекта блочной платформы на основе Bit и CodeSandbox —Практика схемы повторного использования блоков между проектами

использованная литература

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы набираем front-end, iOS и Android круглый год.Если вы готовы сменить работу и любите облачную музыку, присоединяйтесь к нам на grp.music-fe(at)corp.netease.com!

Категории