|
| 1 | +## TypeScriptのnode moduleを作成する |
| 2 | + |
| 3 | +* [Typecriptのnodemoduleの作成に関するレッスン](https://egghead.io/lessons/typescript-create-high-quality-npm-packages-using-typescript) |
| 4 | + |
| 5 | +TypeScriptで書かれたモジュールを使用することは、コンパイル時の安全性とオートコンプリートが得られるので、非常に楽しいことです。 |
| 6 | + |
| 7 | +TypeScript modules can be consumed both in the nodejs (as is) browser (with something like webpack). |
| 8 | + |
| 9 | +高品質のTypeScriptモジュールの作成は簡単です。以下の望ましいフォルダ構造を仮定します。 |
| 10 | + |
| 11 | +```text |
| 12 | +package |
| 13 | +├─ package.json |
| 14 | +├─ tsconfig.json |
| 15 | +├─ src |
| 16 | +│ ├─ index.ts |
| 17 | +│ ├─ foo.ts |
| 18 | +│ └─ ...All your source files (Authored) |
| 19 | +└─ lib |
| 20 | + ├─ index.d.ts.map |
| 21 | + ├─ index.d.ts |
| 22 | + ├─ index.js |
| 23 | + ├─ foo.d.ts.map |
| 24 | + ├─ foo.d.ts |
| 25 | + ├─ foo.js |
| 26 | + └─ ... All your compiled files (Generated) |
| 27 | +``` |
| 28 | + |
| 29 | +* `src/index.ts`: Here you would export anything you expect to be consumed from your project. E.g `export { Foo } from './foo';`. Exporting from this file makes it available for consumption when someone does `import { /* Here */ } from 'example';` |
| 30 | + |
| 31 | +* `tsconfig.json`について |
| 32 | + * `compilerOptions`に`"outDir": "lib"`と、`"declaration": true`と`"declarationMap" : true`を設定します < これはlibフォルダに`.js` (JavaScript) `.d.ts` (declarations for TypeSafety) and `.d.ts.map` (enables `declaration .d.ts` => `source .ts` IDE navigation)生成します |
| 33 | + * `include: ["src"]`を設定します < これは`src`ディレクトリからのすべてのファイルを対象に含めます |
| 34 | + |
| 35 | +* `package.json`について |
| 36 | + * `"main": "lib/index"` <これはNode.jsに`lib/index.js`をロードするように指示します |
| 37 | + * `"types": "lib/index"` <これはTypeScriptに`lib/index.d.ts`をロードするように指示します |
| 38 | + |
| 39 | + |
| 40 | +パッケージの例: |
| 41 | +* `npm install typestyle` [for TypeStyle](https://www.npmjs.com/package/typestyle) |
| 42 | +* 使用法:`import { style } from 'typestyle';`は、完全な型安全性を提供します |
| 43 | + |
| 44 | +### Managing Dependencies |
| 45 | + |
| 46 | +#### devDependencies |
| 47 | + |
| 48 | +* If your package depends on another package while you are developing it (e.g. `prettier`) you should install them as a `devDependency`. This way they will not pollute the `node_modules` of your module's consumers (as `npm i foo` does not install `devDependencies` of `foo`). |
| 49 | +* `typescript` is normally a `devDependency` as you only use it to build your package. The consumers can use your package with or without TypeScript. |
| 50 | +* If your package depends on other JavaScript authored packages and you want to use it with type safety in your project, put their types (e.g. `@types/foo`) in `devDependencies`. JavaScript types should be managed *out of bound* from the main NPM streams. The JavaScript ecosystem breaks types without semantic versioning too commonly, so if your users need types for these they should install the `@types/foo` version that works for them. If you want to guide users to install these types you can put them in `peerDependencies` mentioned next. |
| 51 | + |
| 52 | +#### peerDependencies |
| 53 | + |
| 54 | +If your package depends on a package that it heavily *works with* (as opposed to *works using*) e.g. `react`, put them in `peerDependencies` just like you would with raw JS packages. To test them locally you should also put them in `devDependencies`. |
| 55 | + |
| 56 | +Now: |
| 57 | +* When you are developing the package you will get the version of the dependency you specified in your `devDependencies`. |
| 58 | +* When someone installs your package they will *not* get this dependency (as `npm i foo` does not install `devDependencies` of `foo`) but they will get a warning that they should install the missing `peerDependencies` of your package. |
| 59 | + |
| 60 | +#### dependencies |
| 61 | + |
| 62 | +If your package *wraps* another package (meant for internal use even after compilation) you should put them in `dependencies`. Now when someone installs your package they will get your package + any of its dependencies. |
0 commit comments