Building Your TypeScript Project
Project Layout
- トップレベルの
src/
とdist/
を作るの推奨
Artifacts
Type | 拡張子 | tsconfig.json flag | Emitted by default? |
---|---|---|---|
JavaScript | .js | emitDeclarationOnly === false | yes |
Source maps | .js.map | sourceMap === true | no |
Type declarations | .d.ts | declaration === true | no |
Declaration maps | .d.ts.map | declarationMap === true | no |
-
.js.map
- デバッグが楽になるやつ
- ブラウザ上で、コンパイル前のTSを見られる
-
.d.ts.map
- コンパイルが速くなるやつ
Dialing In Your Compile Target
-
transpileとpolyfill
- transpile: 古い機能に自動変換
-
例
- for..of -> for
- async/await -> Promise/then
- Polyfill: ない機能の実装を補う
- MapとかSetとか
- Array.prototype.findとか
- TSCはtranspileするがpolyfillはしてくれない
-
tsconfig
- target
- transpileのターゲット
- lib
-
polyfillを導入したときに、「使えるよ」と教えてあげるやつ
- polyfillではないがdomなどもこれ
Enabling Source Maps
- 一般に、プロダクションでもsource mapはデプロイしたほうが良い
- ただし、難読化によるセキュリティに信を置いているならばこの限りではない
Project References
- コンパイル時間はコードベースの量にだいたい比例して長引いていく
- これを劇的に開眼するのがproject references
column: Using extends to Reduce tsconfig.json Boilerplate
- 全サブプロジェクトで設定を共有したいときに便利
Error Monitoring
-
実行時にエラーが出ないわけではないので監視を入れる必要はある
- Sentry
- Bugsnag
Running Typescript on the Server
-
targetをES2015 (古いNodeJSならばES5)に設定する
import
/export
がrequire
/module.exports
にトランスパイルされる
-
source map使え
-
監視、ロギング、レポートツールの多くはビルトインのsource mapサポートがある
- PM2
- https://www.npmjs.com/package/pm2
- Process Manager
- load balancer, keep applications alive forever
- Winston
- https://www.npmjs.com/package/winston
- ロガー
- Sentry
- 監視
Running Typescript in the Browser
- モジュールバンドラによって選ぶべきtargetが変わってくる
-
TSC自体も
outFile
フラグを指定することでバンドルを行えるが…- SystemJSとAMDにしか対応していない
- バンドル専用のツールに比べると機能面で弱い
-
TSに限らない一般論
- dynamic import使え
- バンドラのコード自動分割の恩恵に与れ
- 無用なロードを減らす
- パフォーマンスを(できれば実データで)計測せよ
- New Relic
- Datadog
- polifill
- 全環境共通
- 実行環境に応じてdynamic importする
Publishing Your TypeScript Code to NPM
【補】実際に npm publish してみた
[https://www.npmjs.com/package/@d.horiyama/yaml_schema:embed:cite]
git ignore | npm ignore | |
---|---|---|
ts | no | yes |
d.ts | yes | no |
js | yes | no |
-
ビルド成果物のみ含める
- ディレクトリが
/src
,/dist
といった切り方だと楽
- ディレクトリが
-
.npmignore
があればそれを、無ければ.gitignore
が使用される- 【補】
.npmignore
は同階層の.gitignore
しか打ち消さない
- 【補】
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es2015"],
"declaration": true,
"sourceMap": true,
"strict": true,
"noImplicitAny": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
-
"declaration": true
- 型定義ファイルを出力する
-
"sourceMap": true
- デバッグのためにsource mapファイルを含める
package.json
{
"name": "@d.horiyama/yaml_schema",
"version": "0.0.7",
"description": "Specify YAML by JSON Schema v7 in YAML.",
"repository": {
"type" : "git",
"url" : "https://github.com/wand2016/yaml-schema"
},
"main": "dist/index.js",
"types": "dist/index.d.js",
"bin": "bin/yaml_schema",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prepublishOnly": "tsc -d"
},
"keywords": [
"yaml",
"JSON Schema"
],
"author": "Daiki Horiyama",
"license": "MIT",
"dependencies": {
"ajv": "^6.12.2",
"ajv-errors": "^1.0.1",
"commander": "^5.1.0",
"get-stdin": "^8.0.0",
"js-yaml": "^3.13.1",
"typescript": "^3.9.2"
},
"devDependencies": {
"@types/ajv-errors": "^1.0.2",
"@types/js-yaml": "^3.12.4",
"@types/node": "^14.0.4"
}
}
-
"name": "@d.horiyama/yaml_schema"
- Scoped Package
@d.horiyama
名前空間の下に配置- 貴重なグローバル名前空間をクソパッケージでむやみに汚さない
-
"version": "0.0.7"
- versionを上げないとpublishできない
-
"bin": "bin/yaml_schema"
npx
やnpm run
で実行するためのexecutableを配置するnpm install
時にnode_modules/.bin/
にsymlinkが配置される
-
"prepublishOnly": "tsc -d"
- publish前に実行するコマンド
- d.tsファイル込でビルド
bin/yaml_schema
#!/usr/bin/env node
require('../dist/index.js')
- 公開する
npm publish --access=public
-
scoped packageのpublish時は
--access=public
が必要- オプションを付けないとデフォルトでprivate packageとみなされ、課金が必要となる (402 Payment Required)
Triple-Slash Directives
- めったに使われない
The Types Directive
/// <reference types="./global" />
/// <reference types="jasmine" />
コンパイル結果にrequireやimportを含めたくない場合に
The amd-module Directive
- AMDモジュール出力
{
"compilerOptions": {
"module": "amd",
...
Hoge.ts
export class Hoge {}
- コンパイル結果のモジュールはデフォルトで無名
Hoge.js
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Hoge {
}
exports.Hoge = Hoge;
});
//# sourceMappingURL=Hoge.js.map
- triple-slashでモジュール名をつけることができる
Hoge.ts
/// <amd-module name='Hoge' />
export class Hoge {}
Hoge.js
define("Hoge", ["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/// <amd-module name='Hoge' />
class Hoge {
}
exports.Hoge = Hoge;
});
//# sourceMappingURL=Hoge.js.map
英語
-
swath
- 帯
-
curb
- 縁石
- FTTCのCがこれ
- 制限
-
inflict pain
- 痛みを与える