Интенсивное чтение «Rust — будущее JS-инфраструктуры»

внешний интерфейс JavaScript

Rust Is The Future of JavaScript InfrastructureВ этой статье рассматривается тот факт, что Rust набирает популярность в кругах JS-инфраструктуры:Webpack,Babel,Terser,Prettier,ESLintЭти инструменты, ставшие популярными только в последние несколько лет, имеют альтернативы Rust, а производительность улучшена в 10-100 раз.

Итеративная волна интерфейсной инфраструктуры никогда не останавливалась.Когда вышеупомянутые инструменты положили крышку гроба на Gulp, js-beautify, tslint и другие инструменты, новое поколение инструментов сборки на основе Rust незаметно повесило крышку гроба на webpack, бабель, красивее, лаконичнее, эслинт на голове, не знаю, когда накроются.

китайский переводСтоит отметить, что некоторые оригинальные английские существительные, соответствующие определенной китайской интерпретации, записали следующим образом:

  • Низкоуровневое программированиеНизкоуровневое программирование.
  • эргономика:ЭргономикаЭргономика.
  • самоуверенный:самоуверенный, упрямыйиз коробки.
  • критическое принятие:критическое принятиеКритическая точка выбора технологии.

интенсивное чтение

Эта статья не будет представить, как использовать Rust, но сосредоточится на некоторых основных использования инструментальной инструментарии Rust, упомянутых в исходном тексте. Если вы заинтересованы, вы можете немедленно заменить существующую библиотеку инструментов!

swc

swcЭто набор инструментов для компиляции, упаковки, сжатия и других инструментов, разработанных на основе Rust, которые широко используются в инфраструктуре JS более высокого уровня, что значительно способствует влиянию Rust на инфраструктуру JS, поэтому я хочу представить его первым.

swc предоставляет ряд атомарных возможностей, охватывающих среду сборки и выполнения:

@swc/cli

@swc/cliМожно собрать как файлы js, так и файлы ts:

const a = 1

npm i -D @swc/cli
npx swc ./main.ts

# output:
# Successfully compiled 1 file with swc.
# var a = 1;

Конкретные функции аналогичны babel, которые позволяют браузерам поддерживать расширенный синтаксис или ts, но@swc/cliПо крайней мере в 20 раз быстрее, чем Babel. в состоянии пройти.swcrcфайл сделатьпользовательская конфигурация.

@swc/core

Вы можете использовать@swc/core@swc/cli

const swc = require("@swc/core");

swc
  .transform("source code", {
    // Some options cannot be specified in .swcrc
    filename: "input.js",
    sourceMaps: true,
    // Input files are treated as module by default.
    isModule: false,

    // All options below can be configured via .swcrc
    jsc: {
      parser: {
        syntax: "ecmascript",
      },
      transform: {},
    },
  })
  .then((output) => {
    output.code; // transformed code
    output.map; // source map (in string)
  });

На самом деле, CLI звонит в вызовы узла.

@swc/wasm-web

@swc/wasm-web

import { useEffect, useState } from "react";
import initSwc, { transformSync } from "@swc/wasm-web";

export default function App() {
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    async function importAndRunSwcOnMount() {
      await initSwc();
      setInitialized(true);
    }
    importAndRunSwcOnMount();
  }, []);

  function compile() {
    if (!initialized) {
      return;
    }
    const result = transformSync(`console.log('hello')`, {});
    console.log(result);
  }

  return (
    <div className="App">
      <button onClick={compile}>Compile</button>
    </div>
  );
}

@swc/jest

@swc/jest

npm i @swc/jest

затем вjest.config.jsВ файле конфигурации укажите файл TS с компиляцией файла TS@swc/jestТолько что:

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": ["@swc/jest"],
  },
};

swc-loader

swc-loaderЭто для подключаемого загрузчика, заменаbabel-loader:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules)/,
      use: {
        // `.swcrc` can be used to configure swc
        loader: "swc-loader"
      }
    }
  ];
}

swcpack

Улучшена функция объединения нескольких файлов в один файл, что в принципе можно считать swc-версией webpack, конечно, производительность будет лучше, чемswc-loaderПлан был дополнительно улучшен.

На данный момент эта функция все еще находится в стадии бета-тестирования, если она установлена.@swc/clispack.config.jsпосле казниnpx spack

Deno

Deno

DENO - это новая работа JS / TS, поэтому мы всегда любим рисовать аналогию с узлом.quickjskrakenЭто высокопроизводительный движок веб-рендеринга, основанный на quickjs + flutter, альтернатива веб-браузерам в качестве кросс-энд решения.

esbuild

esbuildЭто новое поколение инфраструктуры JS, которая широко используется ранее и является инструментом упаковки и сжатия JS. Хотя записано, производительность сопоставима с ржавчиной и видно вместе с трендой ржавчины.

В настоящее время esbuild имеет две функции: компиляцию и сжатие, которые теоретически могут заменить babel и terser соответственно.

Основное использование функции компиляции:

require('esbuild').transformSync('let x: number = 1', {
  loader: 'ts',
})

// 'let x = 1;\n'

Основное использование функции сжатия:

require('esbuild').transformSync('fn = obj => { return obj.x }', {
  minify: true,
})

// 'fn=n=>n.x;\n'

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

скомпилировать функцию с@swcАналогично, но поскольку Rust поддерживает компиляцию в wsm, то@swcПредоставляет возможность компиляции среды выполнения Web, и Esbuild не видел этой функции.

Rome

RomeЭто семейство интерфейсной инфраструктуры на основе Nodejs, созданное автором Babel, включая, помимо прочего, Babel, ESLint, webpack, Prettier, Jest. В настоящее времяПланируйте рефакторинг с помощью Rust, хотя еще не реализовано, но пока мы можем рассматривать Rome как член Rust.

romeэто семейный API ведра, поэтому вам нужно толькоyarn add romeВсе экологические приготовления завершены.

  • rome bundleУпакуйте проект.
  • rome compile
  • rome develop
  • rome parse
  • rome analyzeDependencies

rome checkДружественный пользовательский интерфейс терминала.

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

NAPI-RS

NAPI-RSПредоставляет высокопроизводительный слой соединения Rust с Node, который может компилировать код Rust в файлы, вызываемые Node. Вот пример с официального сайта:

#[js_function(1)]
fn fibonacci(ctx: CallContext) -> Result<JsNumber> {
  let n = ctx.get::<JsNumber>(0)?.try_into()?;
  ctx.env.create_int64(fibonacci_native(n))
}

И я написал столбец функции Фибоначчи, прямой вызовfibonacci_nativeреализация функции. Чтобы этот метод вызывался Node, сначала установите CLI:npm i @napi-rs/cli.

Поскольку среда громоздкая, нам нужно использовать этот скаффолдинг для инициализации верстака, мы пишем в нем Rust, а затем используем фиксированный скрипт для публикации пакета npm. воплощать в жизньnapi newСоздаем проект, мы обнаружили, что файл входа должен быть js, ведь на него должен ссылаться узел, который, вероятно, такой (я создалmyLibМешок):

const { loadBinding } = require('@node-rs/helper')

/**
 * __dirname means load native addon from current dir
 * 'myLib' is the name of native addon
 * the second arguments was decided by `napi.name` field in `package.json`
 * the third arguments was decided by `name` field in `package.json`
 * `loadBinding` helper will load `myLib.[PLATFORM].node` from `__dirname` first
 * If failed to load addon, it will fallback to load from `myLib-[PLATFORM]`
 */
module.exports = loadBinding(__dirname, 'myLib', 'myLib')

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

  • @cool/core-darwin-x64
  • @cool/core-win32-x64
  • @cool/core-linux-arm64-gnu

@node-rs/helperloadBindingФункция попытается загрузить двоичный пакет, распознаваемый текущей платформой.

Будуsrc/lib.rsПосле того, как код изменится на код последовательности Фибоначчи выше, выполнитеnpm run buildКомпиляция. Обратите внимание, что вам нужно установить среду разработки ржавчины перед компиляцией, если у вас есть строка скриптов, вы можете его увидеть.rustup.rs. Затем опубликуйте текущий проект целиком в виде пакета узла.

После публикации на него можно ссылаться в коде узла:

import { fibonacci } from 'myLib'

function hello() {
  let result = fibonacci(10000)
  console.log(result)
  return result
}

Являясь мостом между Rust и Node, NAPI-RS решает проблему Rust, постепенно заменяя существующую цепочку инструментов JS.

Rust + WebAssembly

Rust + WebAssemblyЭто показывает, что у Rust есть возможность компилировать в wsm.Хотя производительность кода после компиляции станет немного медленнее, он все же намного быстрее, чем js.В то же время, благодаря переносимости wsm, Rust тоже стал переносимым.

На самом деле, неудивительно, что Rust поддерживает компиляцию в WebAssembly, потому что одно из позиционирований WebAssembly заключается в том, чтобы быть целевым продуктом компиляции других языков, а затем он сам поддерживает кроссплатформенность, так что очень хорошо выполняет миссию распространения. хорошо.

WebAssembly — это виртуальная машина на основе стека (stack machine), Ведущие кроссплатформенные возможности.

Чтобы скомпилировать Rust в wsm, помимо установки среды разработки Rust, установитеwasm-pack.

Чтобы скомпилировать после установки, просто выполнитеwasm-pack buildВот и все. Больше использования можно посмотретьДокументация API.

dprint

dprintdprint-nodeисходный кодNAPI-RSвыполнить.

dprint-nodeМожет использоваться непосредственно в узле:

const dprint = require('dprint-node');
dprint.format(filePath, code, options);

документация по параметрам.

Parcel

ParcelСтрого говоря, это последнее поколение JS-инфраструктуры, появившееся после Webpack и до тренда на Rust. Однако, поскольку он имеетПереписать с помощью SWCТак условно считается, чтобы не отставать от моды.

Суммировать

Семейная корзина для фронтенда уже имеет полный набор реализаций Rust, но точность компиляции стандартных проектов нуждается в серьезной проверке, и нам еще нужно время, чтобы дождаться зрелости этих библиотек.

Но можно не сомневаться, что язык Rust имеет относительно полную поддержку JS-инфраструктуры, а остальное — лишь проблема логического покрытия инструментальной прослойки, которая со временем может быть решена. Огромное улучшение производительности, вызванное логикой, переписанной на языке Rust, придаст сообществу огромную жизненную силу.Как сказано в исходном тексте, интерфейсное сообщество может ввести язык Rust для значительного вклад в сообщество.

Адрес обсуждения:Интенсивное чтение «Rust — будущее JS-инфраструктуры» · Выпуск №371 · dt-fe/weekly

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.

Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)

Категории