|
| 1 | +# typescript-plugin-namespace-import |
| 2 | + |
| 3 | +A [TypeScript Language Service Plugin](https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin) to insert [Namespace Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents) automatically. |
| 4 | + |
| 5 | +## Motivation |
| 6 | + |
| 7 | +We often use an object as a namespace. |
| 8 | + |
| 9 | +```typescript |
| 10 | +// someLogics.ts |
| 11 | +export const someLogics = { |
| 12 | + calculate() { ... }, |
| 13 | + print() { ... }, |
| 14 | +}; |
| 15 | + |
| 16 | +// main.ts |
| 17 | +import { someLogics } from "./someLogics.ts"; |
| 18 | + |
| 19 | +someLogics.calculate() |
| 20 | +// `someLogics` is auto-completable without import! |
| 21 | +``` |
| 22 | + |
| 23 | +This is good way in developer experience, but it obstruct tree-shaking. In this case, `someLogics.print` will be included in bundle although it's not used. |
| 24 | + |
| 25 | +To keep tree-shaking working, we can use [Namespace Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents). |
| 26 | + |
| 27 | +```typescript |
| 28 | +// someLogics.ts |
| 29 | +export function calculate() { ... } |
| 30 | +export function print() { ... } |
| 31 | + |
| 32 | +// main.ts |
| 33 | +import * as someLogics from "./someLogics.ts"; |
| 34 | + |
| 35 | +someLogics.calculate() |
| 36 | +// `someLogics` is NOT auto-completable without import :( |
| 37 | +``` |
| 38 | + |
| 39 | +Now we can tree-shake `someLogics.print`. However, developer experience get worse because we can't auto-complete `someLogics` without import statement. We need to write import statement by ourselves. |
| 40 | + |
| 41 | +typescript-plugin-namespace-import resolves this problem by making Namespace Import auto-completable. |
| 42 | + |
| 43 | +## Installation |
| 44 | + |
| 45 | +Install with npm/yarn. |
| 46 | + |
| 47 | +```sh |
| 48 | +npm install -D typescript-plugin-namespace-import |
| 49 | +# or yarn add -D typescript-plugin-namespace-import |
| 50 | +``` |
| 51 | + |
| 52 | +Then add this plugin in `tsconfig.json`. |
| 53 | + |
| 54 | +```json |
| 55 | +{ |
| 56 | + "compilerOptions": { |
| 57 | + "plugins": [ |
| 58 | + { |
| 59 | + "name": "typescript-plugin-namespace-import", |
| 60 | + "options": { |
| 61 | + "paths": ["src/logics"] |
| 62 | + } |
| 63 | + } |
| 64 | + ] |
| 65 | + } |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +`paths` option is required. See below for detail. |
| 70 | + |
| 71 | +## Options |
| 72 | + |
| 73 | +### paths (required) |
| 74 | + |
| 75 | +Specify directory in relative path to the project's root (`tsconfig.json`'s dir). All `.ts` or `.js` files in the directories can be Namespace Imported with auto-completion. |
0 commit comments