攜手Rollup與TS造輪子

導讀

隨着 Typescript 愈來愈流行，我也開始隨大流使用 ts 把以前用造的輪子從新造一遍。我在打包工具上糾結了一會，是 webpack 仍是 gulp 好呢。最終，我選擇了 Rollup.js 。（沒用過 Rollup 老是充滿期待的）

那就敲定使用 Rollup + Typescript + jest 來造輪子。

我已經配置好的快速開始項目rollup-starter-ts：github.com/zenoslin/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
    }
  ]
};
複製代碼

使用typescript

將 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.
複製代碼

nice！這下咱們功德圓滿能夠盡情的造輪子了！