Type Script+Babel+Rollupに基づいてts開発環境を構築する.

前言
この文章はType Script+Babel+Rollupに基づいてts開発環境を構築する解決策を述べています.まず、この方案の長所と短所を説明して、手順によって各プラグインの配置方式を詳しく説明して、TSプロジェクトのコンパイル原理を理解するように助けます.
以下はこの記事の例示的なコードに依存する基礎的な環境です.

MacOS

NodeJS v 8+

Yarn

Visual Stdio Code

Git

Type Script+Babel方案の特徴
何がBabel-Type Scriptですか?
皆さんはBabel公式サイトで一つのpresetを見たことがあるかもしれません.@babel/preset-typescriptという名前です.そうです.BabelはES 6のシンタックス飴をコンパイルしたり、ブラウザの互換性をpolyfillにしたりするほか、Type Scriptに対するサポートも拡張していますが、公式Type Scriptとは少し違っています.
これから、私が皆さんにご案内します.
開発体験の特徴
Type Script+Babel方案を使って構築したプロジェクトの特徴は何ですか?

開発コンパイルプロセスは、Babelが直接にtypescriptタイプのタグを削除し、コンパイル結果を出力します.

速度は速いですが、タイプチェックはありません.

は、eslintを通じて文法チェックとタイプチェックを行います.

、そしてタイミングをチェックするのは、comit時(huskyによって追加されたフック)

である.

もちろん、vscodeはtypescriptのタイプチェックにもある程度のサポートがあります.

文法チェックによるトラブルを低減するために、prettierを配置することによってコードをフォーマットする.

ファイルを保存する場合(プロファイルエディタが必要です)prettier

をトリガします.

git comit実行時(huskyによって実現される)トリガprettier

バベルコンパイルの劣勢
何事も初めが難しいです.まずBabelコンパイルの劣勢について話してください.

BabelコンパイルType Scriptはタイプチェックができません.すべてのタイプのステートメントはBabelに捨てられます.

は、コンパイル部分の構文をサポートしていません.例えば、import xx=xx、namespace(どうでもいいです.これらの文法は全部破棄されました.)

Typeescriptコンパイラは上記の問題が全くないです.どうしてBabelを使ってTypeescriptをコンパイルする必要がありますか?
Babelコンパイルのメリット
まず苦い後に甘いものを食べて、Babelの長所を説明してください.

-Babelは、ブラウザの互換性に応じて必要に応じてコンパイルすることをサポートしています.このType Scriptはサポートされていません.また、政府も考慮範囲内ではないと宣言しました.

Polyfill-Babelは、必要に応じて、ブラウザの互換性に応じてPolyfillを追加することをサポートしています.

Plugins/Presets-Babelはスーパー多いPluginsをサポートしています.また、Presetsを設定することによって複雑なPlugins配置を免除することができます.これはType Scriptも

を満たすことができません.
はい、詳しく説明しました.実戦訓練を見に来て、デモに着手します.
怠け者は以下の命令を実行してください.後は手を出さなくてもいいです.

git clone https://github.com/lianer/test-babel-typescript.git

空いているデモプロジェクトを作成します.
命令行で直接これらの命令を実行します.まず基本的な倉庫足場を作ります.

mkdir test
cd test

npm init

mkdir src
cd src

#              
cat < index.ts
const sum = function (a: number, b: number): number {
  return a + b;
};
console.log(sum(1, 2));
EOF

ディレクトリ構造は以下の通りです

| src
  | index.ts
| package.json

typescriptの設定
核心の要求のtypescriptを配置して、lintの時だけそれを使うことができますが.
1、据え付けtypescript依存

yarn add -D typescript

2、tsconfigプロファイルを追加する
デモプロジェクトですので、あまり要求がありませんので、ここでデフォルトの配置を維持すれば十分です.

./node_modules/.bin/tsc --init

rollup、babelセットの設定
tsファイルのコンパイルをサポートし、jsファイルを出力します.
関連資料

rollup

rollup-plugin-babel

@rollup/plugin-node-resolive

@babel/preset-env

@babel/presett-typescript

ガイドの設定
1、設置に関する依存

#    rollup   
yarn add -D rollup rollup-plugin-babel@latest @rollup/plugin-node-resolve

#    babel   
yarn add -D @babel/core @babel/preset-env @babel/preset-typescript

2.追加.babelrcプロファイル

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

3、rollup.co nfig.jsプロファイルを追加する.

const path = require('path');
const babel = require('rollup-plugin-babel');
const nodeResolve = require('@rollup/plugin-node-resolve');
const pkg = require('./package.json');

const extensions = ['.js', '.ts'];

const resolve = function(...args) {
  return path.resolve(__dirname, ...args);
};

module.exports = {
  input: resolve('./src/index.ts'),
  output: {
    file: resolve('./', pkg.main), //         ，     package.json      
    format: 'esm',
  },
  plugins: [
    nodeResolve({
      extensions,
      modulesOnly: true,
    }),
    babel({
      exclude: 'node_modules/**',
      extensions,
    }),
  ],
};

4、npm scriptsを配置する
前のプロジェクトにまだpackage.jsonファイルがなかったら、npm initコマンドで初期化してもいいです.

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

5、rollup.co nfig.jsで、package.json-mainの配置項目を使っていますので、package.jsonを修正することを忘れないでください.

"main": "lib/index.js"

5、テストしてみます

npm run build

包装に成功しました.結果を出力します.

> [email protected] build /dev/test
/dev/test/src/index.ts → lib/index.js...
> rollup -c
created lib/index.js in 460ms

ディレクトリ構造

| lib
  | index.js
| src
  | index.ts
| .babelrc
| package.json
| rollup.config.js
| tsconfig.json
| yarn.lock

コンパイルされたlib/index.jsファイルの内容

var sum = function sum(a, b) {
  return a + b;
};

console.log(sum(1, 2));

真面目な学生が気づいたかもしれません.BabelはType Scriptタイプの だけです.
注:もしこのステップで誤報したら、ヒントThe "path" argument must be of type string. Received type undefinedがあれば、package.json-mainの設定に誤りがあるかどうかを確認します.
eslint、prettierの設定
コードのタイプチェック、文法チェック、コードフォーマットをサポートします.
関連資料

eslint

prettier

lint-staged

mrm

ガイドの設定
1、設置依存

#    eslint   
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

#    prettier
yarn add -D prettier

#    husky、lint-staged   
yanr add -D husky lint-staged

2、プロファイルを追加します.eslintrc.js
.eslintrc.jsファイル記述eslint文法チェックとtsタイプチェックのルール

const path = require('path');
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended' // Uses the recommended rules from the @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    project: path.resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  }
};

3、プロファイルを追加します.prettierrc
prettierrcファイルはコードフォーマットのルールを説明します.

{
  "semi":  true,
  "trailingComma":  "all",
  "singleQuote":  true,
  "printWidth":  120,
  "tabWidth":  2
}

4、package.jsonを修正し、huskyとlint-stagedを配置する.
非常に巨大なプロジェクトです.eslintの完全検査は何分かかりますか?
sky+lint-stagedは、提出されたファイルだけをチェックして、開発効率を向上させることができます.
これはたとえあなたのプロジェクトがどんなに大きくても、今回提出した書類を確認するだけで、数秒しかかかりません.

"scripts": {
  "lint": "eslint 'src/**/*.{js,ts}'"
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*./src/**/*.{js,ts,json,css,less,md}": [
    "prettier --write",
    "yarn lint"
  ]
}

上記の構成は、git commitを実行するときにprettierのフォーマットコードを呼び出し、eslintを使用してタイプおよび文法のチェックを行うことができる.
5、ファイルを保存する場合は自動的にコードをフォーマットする必要があります.vscodeプラグインをインストールする必要があります.prettier、以下の構成をする.

"editor.formatOnSave": false, //            ，    js   ts    
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

包装メカニズムをさらに改善する
さらにrollupのパッケージ構造を改善し、マルチタスクパッケージをサポートし、異なるプロジェクトに必要なリソースファイルを包装します.
導入rimraf, npm-run-all, rollup-plugin-uglify, lodash.merge関連資料

rimraf-ファイル削除ツールは、毎回コンパイルする前にクリアリスト

npm-run-all-npmコマンド並列実行ツール

rollup-plugin-uglify-uglify js圧縮ツール

lodash.merge-コンフィギュレーション

ガイドの設定
1、設置依存

yarn add -D rimraf npm-run-all rollup-plugin-uglify lodash.merge

2、rollup.co nfig.jsを修正する.

const path = require('path');
const babel = require('rollup-plugin-babel');
const nodeResolve = require('@rollup/plugin-node-resolve');
const uglify = require('rollup-plugin-uglify').uglify;
const merge = require('lodash.merge');
const pkg = require('./package.json');

const extensions = ['.js', '.ts'];

const resolve = function(...args) {
  return path.resolve(__dirname, ...args);
};

//           
const jobs = {
  esm: {
    output: {
      format: 'esm',
      file: resolve(pkg.module),
    },
  },
  umd: {
    output: {
      format: 'umd',
      file: resolve(pkg.main),
      name: 'rem',
    },
  },
  min: {
    output: {
      format: 'umd',
      file: resolve(pkg.main.replace(/(.\w+)$/, '.min$1')),
      name: 'rem',
    },
    plugins: [uglify()],
  },
};

//            
const mergeConfig = jobs[process.env.FORMAT || 'esm'];

module.exports = merge(
  {
    input: resolve('./src/index.ts'),
    output: {},
    plugins: [
      nodeResolve({
        extensions,
        modulesOnly: true,
      }),
      babel({
        exclude: 'node_modules/**',
        extensions,
      }),
    ],
  },
  mergeConfig,
);

3、package.json-scriptsを修正する

"main": "lib/index.umd.js",
"module": "lib/index.esm.js",
"scripts": {
  "lint": "eslint 'src/**/*.{js,ts}'",
  "dev": "rollup -w -c --environment FORMAT:esm",
  "build:esm": "rollup -c --environment FORMAT:esm",
  "build:umd": "rollup -c --environment FORMAT:umd",
  "build:min": "rollup -c --environment FORMAT:min",
  "build": "rimraf lib/* && run-p build:esm build:umd build:min"
},

ここでは先にrimrafツールを通じてlibディレクトリをクリアして、npm-run-allツールを通して並行して3つのサブコンパイルを行います.
ここの3つのサブコンパイルタスクは、それぞれ:

build:esm-は、Vue、Reactなどのesmodule仕様を用いてモジュール化されたパッケージ化プロジェクトをコンパイルしました.

build:umd-umd-は、jQuery、Vue、NodeJSなどのプロジェクトのために、umd規格に準拠した実行可能ファイルをコンパイルしました.

build:min−umd仕様に準拠した圧縮実行可能ファイルをコンパイルする

4、テスト実行パッケージコマンド

npm run build

出力結果ファイル

| lib
  | rem.esm.js
  | rem.umd.js
  | rem.umd.min.js

工事をいっそう完備する
エディタの挙動を統一します.スペース、インデントなど、git無視リストを追加します.
1.editoconfigプロファイルを追加し、エディタは対応するeditoconfigプラグインをインストールし、このプロジェクトに同じスペース、インデントなどのコードスタイルを統一的に適用させる.

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

2.gitignoreプロファイルを追加します.ここで一つ紹介します.gitignoreの生成ツール-
gitignore.io

# Created by https://www.gitignore.io/api/vuejs,visualstudiocode
# Edit at https://www.gitignore.io/?templates=vuejs,visualstudiocode

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

### VisualStudioCode Patch ###
# Ignore all local history of files
.history

### Vuejs ###
# Recommended template: Node.gitignore

node_modules/
dist/
npm-debug.log
yarn-error.log

# End of https://www.gitignore.io/api/vuejs,visualstudiocode

Resoult
これでRollup+Babel+Type Script+ESListのセットの構築が完了しました.
完璧ではないところがあれば、文末でのコメントを歓迎します.