$ yarn

# lint
$ yarn lint

# test
$ yarn test

$ mypackagetemplate 
$ cd mypackagetemplate
$ yarn init or npm init

テンプレートのインストールパッケージ

この手順では、テンプレートのいくつかのパッケージをインストールします.

$ yarn add typescript --dev

# generate tsconfig.json
$ yarn tsc --init or node_modules/.bin/tsc --init

更新されたtsconfigが更新されました.以下のようなJSON.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

コードを書く

$ mkdir src
$ cd src
$ touch index.ts
$ touch odd_even.ts

odd_even.tsコードは超簡単です.番号を渡すだけであれば、数字も、それが返されますtrue .

export default (value: number): boolean => {
  return value %2 ==0 ? true : false;
}

index.ts次のコードは、次のようなコードをインポートできます.import { odd_even } from 'package-name'

import odd_even from './odd_even';

export default {
  odd_even: odd_even,
}

追加エスペラントジェスト

この手順では、我々はeslintと冗談を設定します.
eslintとjestをインストールします.yarn run eslint --init コマンドを実行すると、設定ファイルを作成することができます.

$ yarn add eslint jest ts-jest -D
$ yarn run eslint --init
# settings for this
# ❯ To check syntax and find problems
# ❯ JavaScript modules (import/export)
# ❯ None of these
# ? Does your project use TypeScript? › No / ❯ Yes
# ✔ Browser
# ✔ Node
# ❯ JavaScript
# ? Would you like to install them now with npm? › No / ❯ Yes

あなたが表示されます.eslintrc.js プロジェクトフォルダ

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};

我々は修正する必要があるpackage.json 走るeslint .

  "scripts": {
    "build": "rollup -c",
    "lint": "eslint --fix 'src/**/*.ts'",
    "test": "jest"
  },

今、我々は下のコードのリントを行うことができますsrc .

$ yarn lint

次に、jestに設定しますpackage.json

"jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/test/**/*.test.ts"
    ]
  }

書き込みテスト

まず、creataeテストフォルダ

$ mkdir test

test/odd_even.test.tsテストコードも簡単ですodd_even.ts . コードは2ケース、奇数(1)と偶数(2)をテストします.

import odd_even from '../src/odd_even';

describe('test odd_even', (): void => {
  test('odd', (): void => {
    const resp: boolean = odd_even(1);
    expect(resp).toBe(false);
  });

  test('even', (): void => {
    const resp: boolean = odd_even(2);
    expect(resp).toBe(true);
  });
});

さて、次のコマンドでテストを実行できます

$ yarn test

ロールアップを設定します。js

最後のステップは、ロールアップを設定しています.バベルを含む.
ロールプjs

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. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.

https://rollupjs.org/guide/en/
あなたがrollupを使用したくない場合.JSは、Webpackなどの他のユーザーを使用することができます.

$ yarn add rollup rollup-plugin-terser @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript tslib @babel/core @babel/preset-env -D

追加.babelrc.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
    ],
  ],
};

rollup.config.js

import { terser } from "rollup-plugin-terser";
import pluginTypescript from "@rollup/plugin-typescript";
import pluginCommonjs from "@rollup/plugin-commonjs";
import pluginNodeResolve from "@rollup/plugin-node-resolve";
import { babel } from "@rollup/plugin-babel";
import * as path from "path";
import pkg from "./package.json";

const moduleName = pkg.name.replace(/^@.*\//, "");
const inputFileName = "src/index.ts";
const author = pkg.author;
const banner = `
  /**
   * @license
   * author: ${author}
   * ${moduleName}.js v${pkg.version}
   * Released under the ${pkg.license} license.
   */
`;

export default [
  {
    input: inputFileName,
    output: [
      {
        name: moduleName,
        file: pkg.browser,
        format: "iife",
        sourcemap: "inline",
        banner,
      },
      {
        name: moduleName,
        file: pkg.browser.replace(".js", ".min.js"),
        format: "iife",
        sourcemap: "inline",
        banner,
        plugins: [terser()],
      },
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: [".js", ".ts"],
      }),
      babel({
        babelHelpers: "bundled",
        configFile: path.resolve(__dirname, ".babelrc.js"),
      }),
      pluginNodeResolve({
        browser: true,
      }),
    ],
  },

  // ES
  {
    input: inputFileName,
    output: [
      {
        file: pkg.module,
        format: "es",
        sourcemap: "inline",
        banner,
        exports: "named",
      },
    ],
    external: [
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.devDependencies || {}),
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: [".js", ".ts"],
      }),
      babel({
        babelHelpers: "bundled",
        configFile: path.resolve(__dirname, ".babelrc.js"),
      }),
      pluginNodeResolve({
        browser: false,
      }),
    ],
  },

  // CommonJS
  {
    input: inputFileName,
    output: [
      {
        file: pkg.main,
        format: "cjs",
        sourcemap: "inline",
        banner,
        exports: "default",
      },
    ],
    external: [
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.devDependencies || {}),
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: [".js", ".ts"],
      }),
      babel({
        babelHelpers: "bundled",
        configFile: path.resolve(__dirname, ".babelrc.js"),
      }),
      pluginNodeResolve({
        browser: false,
      }),
    ],
  },
];

最後に、我々は構築することができます.万事うまく行けばわかるdist フォルダと4つのjsファイル(hellotslib . cjs . js、hellotslib . es js、hellotslib . js、およびhellotslib . min . js)

$ yarn build

今、あなたはNPMの世界にあなたのNPMのパッケージを介してもたらす任意の機能を追加することができます😎