первый опыт СВК

Rust
первый опыт СВК

Это первый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.

что такое СВК

в начале сказатьswcПеред этим давайте разбиратьсяRustэтот язык программирования.

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

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

fn main() {
    let arr = vec![1, 2, 3];
    let new_arr = arr;

    // 无奖竞猜，打印啥
    println!("{:?}", arr);
}

Нажмите, чтобы увидеть результаты

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

Друзья, интересующиеся Rust, могут взглянуть на мой (Заметки об исследовании ржавчины)

В настоящее времяRustОн используется во внешних цепочках инструментов, таких как сжатие (Terser), компиляция (Babel), форматирование (Prettier), упаковка (webpack) и другие сценарии. И сегодня мы поговорим оswcСделать это сделать такую ​​вещь.

Давайте взглянемswcОфициальное введение:

SWC (stands for Speedy Web Compiler) is a super-fast TypeScript / JavaScript compiler written in Rust.

swcНа самом деле, большая часть причины заключается в заменеbabel,такbabelнемногоФункцияУ него это почти есть.

Самым большим отличием от Babel может быть:swc is super-fast

На официальном сайте swc тоже есть такая фраза, отражающая его скорость:

КромеswcПомимо официальной пропаганды,Next.jsна основеswcпонялRustКомпилятор используется для разбора скомпилированного и упакованного кода. НижеNext.jsкомбинироватьswcДанные, приведенные после:

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

Это также причина, по которой многие проекты выбирают доступ к нему.

как использовать свк

основное использование

  1. Установить зависимости:npm i -D @swc/cli @swc/core
  2. Запустите команду:npx swc ./index.js -o output.js(собрать в один файл)

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

Если вы хотите вывести файл, вам нужно выполнить параметры для завершения-o ouput.jsили-d distКомпилировать в каталог dist

Bundling

  1. В корневом каталоге должен быть файл конфигурацииspack.config.js 
const { config } = require('@swc/core/spack');

module.exports = config({
  entry: {
    web: './src/index.js',
    // 可以配置多入口
  },
  output: {
    path: './bundle/',
  },
  module: {},
  options:{},
});
  1. Команда выполненияnpx spackупаковать

Поддержка упаковкиtree-shaking,Commonjsмодули, извлечь общие модули и т. д.

Подробные элементы конфигурации:Коммерческий транспорт.Жизнь/docs/config…

Plugin

swcизpluginНа самом деле, некоторые из основных пакетовAPIОткройте его, чтобы позволить разработчикам выполнять некоторые пользовательские операции.

Давайте рассмотрим пример. Функция этого примера состоит в том, чтобы преобразовать код вconsole.log()отфильтровать сvoid 0заменять

Студенты, которые использовали Bable, могут выглядеть немного проще.

const Visitor = require('@swc/core/Visitor').default;
const { transformSync } = require('@swc/core');

module.exports = class ConsoleStripper extends Visitor {
  visitCallExpression(expression) {
    if (expression.callee.type !== 'MemberExpression') {
      return expression;
    }
    // 判断代码类型以及对应的value是否为console
    if (
      expression.callee.object.type === 'Identifier' &&
      expression.callee.object.value === 'console'
    ) {
      // 如果是就替换为`void 0`
      if (expression.callee.property.type === 'Identifier') {
        return {
          type: 'UnaryExpression',
          span: expression.span,
          operator: 'void',
          argument: {
            type: 'NumericLiteral',
            span: expression.span,
            value: 0,
          },
        };
      }
    }

    return expression;
  }
};

const out = transformSync(
  `
if (foo) {
    console.log("Foo")
} else {
    console.log("Bar")
}`,
  {
    plugin: (m) => new ConsoleStripper().visitProgram(m),
  }
);

Стоит отметить, что в настоящее времяswcПлагин системы наличие проблем с производительностью. Проблемы с производительностью в основном сосредоточены на двух аспектах

  1. БудуASTпройти черезRustПотеря связи происходит при переходе на JS
  2. пройти в JSJSON.parese()Потери при перекодировании.

В настоящее времяswcТакже ведется работа по решению этого вопроса.Нажмите, чтобы съесть дыню

Вышеупомянутое - это некоторые из вещей, которые, как мне кажется, могут использоваться чаще, конечно, кроме этогоswcТакже предоставляет что-то вродеJest,а такжеwasmинструменты иswcтакже обеспечиваетloaderдля разработчиковwebpackиспользуется в.

почему swc быстрый

потому чтоJavaScriptЭто немного медленно само по себе.

Давайте сначала посмотримjsПроцесс выполнения:

который превращается вASTИ компиляция в байт-код должна быть самой требовательной к производительности.

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

Далее берем тот, что вышеPluginпосмотриswcКак это выполняется в процессе преобразования кода?

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

Мы попали в точку останова вtransformSync, взгляните на выполнение здесь:

Давайте взглянем на более важную часть кода:

transformSync(src, options) {
  
        // ...
  
        const { plugin } = options, newOptions = __rest(options, ["plugin"]);
  	// 是否有plugin
        if (plugin) {
            const m = typeof src === "string" ? this.parseSync(src, (_c = options === null || options === void 0 ? void 0 : options.jsc) === null || _c === void 0 ? void 0 : _c.parser, options.filename) : src;
            return this.transformSync(plugin(m), newOptions);
        }
  	// 最终的输出都是bindings.transformSync
        return bindings.transformSync(isModule ? JSON.stringify(src) : src, isModule, toBuffer(newOptions));
    }

Примерно выполняем процесс:

Как видно из приведенной выше схемы выполнения, получаемые нами результаты в конечном итоге определяютсяbindings.transformSyncАнализ завершен, и результат выводится.

можно найти в исходном кодеbindingsВход, давайте сделаем здесь точку останова, посмотрите отсюдаbindingsпроцесс исполнения

function loadBinding(dirname, filename = 'index', packageName) {
   
    // 获取系统信息
    const triples = triples_1.platformArchTriples[PlatformName][ArchName];
    
    // 遍历系统信息
    for (const triple of triples) {
        if (packageName) {
            try {
                // 获取到需要加载的二进制文件路径
                // /Users/xx/swc-demo/node_modules/@swc/core-darwin-x64/swc.darwin-x64.node
                return require(
                  require.resolve(
                    `${packageName}-${triple.platformArchABI}`,
                    { paths: [dirname] }
                  ));
            }
            catch (e) {
               // ...
            }
        }
       // ...
}

блок-схема:

Окончательный результат, который мы получаем,require进来一个二进制文件.

Путь к этому файлу выглядит так:/Users/xx/swc-demo/node_modules/@swc/core-darwin-x64/swc.darwin-x64.node, конечно, это создаст разные пути для разных компьютеров~

Посмотри,swcПакет содержит этот файл:

Чтобы убедиться, что это двоичный файл, мы можем щелкнуть по нему и посмотреть (вот плагин, который использует vscode, чтобы увидеть его)

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

Суммировать

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

JS — самый красивый язык в мире.

Хорошо, эта статья предназначена для того, чтобы простым способом понять, что такое swc. Заинтересованные студенты могут прийти и поиграть сами. Далее я помещу ниже репозиторий кода собственного опыта. Некоторые конфигурации отладки были настроены. Каждый. Вы можете попробовать. играть.

Категории