Объединитесь с Rollup и TS, чтобы построить колеса

rollup.js

Управляемое чтение

вместе сTypescriptЭто становится все более и более популярным, и я начинаю плыть по течению.tsВосстановите колеса, которые вы использовали раньше. Я некоторое время боролся с инструментом упаковки, даwebpackещеgulpХорошо. Наконец, я выбралRollup.js. (Не используетсяRollupвсегда жду с нетерпением)

Затем завершите использованиеRollup + Typescript + jestделать колеса.

У меня настроен проект быстрого стартаrollup-starter-ts:GitHub.com/Как, о, лес/RO…

Rollup.js

Rollup — это сборщик модулей JavaScript, как сказано в его официальной документации:

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

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

Итак, если вам нужно создать веб-приложение, возможно,webpackбыло бы лучше, чемRollupболее подходящий. До сих пор я могу интерпретировать это как более сфокусированноеjsИнструмент для упаковки библиотек.

начать

Установитьrollup

$ npm install --save-dev rollup

После установки давайте сначала напишем файл конфигурацииrollup.config.js

// ./`rollup.config.js`
export default {
  input: "./src/main.js",
  output: [
    {
      format: "cjs",
      file: "lib/bundle.cjs.js"
    },
    {
      format: "es",
      file: "lib/bundle.esm.js"
    }
  ]
};

Давайте попробуем упаковать и создать новуюjsдокумент

// ./src/main.js
let version = "0.0.1";

export default () => {
  return `this version is ${version}`;
};

существуетpackage.jsonПрисоединяйся

"scripts": {
    "build": "rollup -c"
 }

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

$ npm run build

./src/main.js → lib/bundle.cjs.js, lib/bundle.esm.js...
created lib/bundle.cjs.js, lib/bundle.esm.js in 32ms

На данный момент мы успешно упаковали main.js в две версии.ES6а такжеCommonJS.

Typescript

Далее мы позволимrollupПоддержка упаковкиts

добавить зависимости

Установитьtypescript

$ npm install --save-dev rollup-plugin-typescript typescript tslib

Установитьsourcemaps

$ npm install --save-dev rollup-plugin-sourcemaps

Изменить файл конфигурации

существуетrollupдобавить плагин в конфиг

// ./`rollup.config.js`

import typescript from "rollup-plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";

export default {
  input: "./src/main.ts",
  plugins: [
    typescript({
      exclude: "node_modules/**",
      typescript: require("typescript")
    }),
    sourceMaps()
  ],
  output: [
    {
      format: "cjs",
      file: "lib/bundle.cjs.js",
      sourcemap: true
    },
    {
      format: "es",
      file: "lib/bundle.esm.js",
      sourcemap: true
    }
  ]
};

использовать машинописный текст

Будуmain.jsфайл изменен наmain.ts

let version: string = "0.0.1";

export default (): string => {
  return `this version is ${version}`;
};

пакетный файл

$ npm run build

./src/main.ts → lib/bundle.cjs.js, lib/bundle.esm.js...
created lib/bundle.cjs.js, lib/bundle.esm.js in 65ms

На этом мы закончили, и мы можем начать строить колеса сколько душе угодно!

Но поскольку он строит колеса, как может быть отсутствие фреймворков для тестирования?

jest

нам нужно добавитьjestи сделать так, чтобы он поддерживалts

добавить зависимости

Установитьjestи этоtsполагаться

$ npm install --save-dev jest ts-jest @types/jest

Добавить файл конфигурации

Добавить кjestфайл конфигурацииjest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node"
};

писать тесты

Добавить кtestпапку и добавить файлыmain.spec.ts

import Main from "../src/main";

test("version is 0.0.1?", () => {
  const test = Main;
  expect(test()).toBe("this version is 0.0.1");
});

тестовое задание

существуетpackage.jsonПрисоединяйсяtestсценарий

"scripts": {
    "build": "rollup -c",
    "test": "jest --no-cache"
}

выполнить тест

$ npm run test

PASS  test/main.spec.ts
√ version is 0.0.1? (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.739s
Ran all test suites.

Приятно! Теперь, когда наши заслуги завершены, мы можем строить колеса сколько душе угодно!

Категории