创建针对 Angular2 的 npm 包（使用 TypeScript）

2 年 ago
雅, 悟
2 minutes

首先

我想要尝试一下现在的Angular2的Beta版，所以我阅读了官方网站上的QuickStart教程。

由于我有使用Angular1.x的经验，所以在理解上并没有太多困难，而且TypeScript是一种让我感到非常有趣的语言，所以在QuickStart之后，我决定尝试创建一个Angular2的库。由于我在前端开发方面的经验不是太多，所以我边查找npm包的创建方法，边试着按照这个方法去做，虽然可能有些问题，但总体来说还算不错。

请您在文章末尾注明所做的内容以及参考的网站，如果可以的话，请您也参考一下。

达到目标

能够创建和发布Angular2的库

总结为三句话

    • Git では .ts のみ管理 (.js や .d.ts ファイルは管理しない)

TypeScript のコンパイルは es5、 moduleResolution を node に指定する
作ったライブラリをインポートする際に SystemJS の map でパスの指定が必要

备考1: 就我目前的理解来看，这并不是最佳实践（针对Angular2的快速入门指南）。

备考2：我觉得在使用SystemJS导入时，可能存在一种方法可以避免指定地图（map）。不过也有可能只是我的一种感觉而已。

策略

目录结构

lib ディレクトリを作成してそこにコードを書く

lib/components など、機能ごとにディレクトリを作成してまとめる

lib/components.ts で必要に応じて export する

(もしかしたら / においた方がいいのかも)

创建 src 目录和 dest 目录，将 ts 文件放在 src 目录中，编译结果放在 dest 目录中的示例也是有的，这可能是个人喜好的问题吧。

angular2-example-library
├── lib
│   ├── components
│   │   ├── example.component.ts
│   │   └── sample.component.ts
│   ...
│   └── components.ts
...
├── .gitignore
├── .npmignore
├── package.json
├── tsconfig.json
├── tslint.json
└── typings.json

// 公開したいものを export
export * from './components/example.component';
export * from './components/sample.component';

import {Component} from 'angular2/core';

@Component({
  selector: 'example',
  template: '<p>example!</p>'
})
export class ExampleComponent {}

# TypeScript
*.js
*.map
*.d.ts

# DO NOT IGNORE TYPESCRIPT FILES FOR NPM
# TypeScript
# *.js
# *.map
# *.d.ts

在.package.json中，我指定了.gitignore文件来编译.js文件等，并生成js文件等的设置，以便在发布软件包时进行TypeScript编译。因此，实际的npm软件包中也包括.js文件。

设定文件

{
  "name": "angular2-example-library",
  "version": "0.1.0",
  "description": "Angular 2 Example Library",
  "homepage": "https://github.com/example/example.git",
  "author": "Mr. Example <example@example.com>",
  "dependencies": {
    "angular2": "^2.0.0-beta.9",
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "scripts": {
    "test": "tslint ./lib/*.ts ./lib/**/*.ts",
    "prepublish": "tsc",
    "typings": "typings"
  },
  "typings": "./lib/components.d.ts",
  "repository": {
    "type": "git",
    "url": "git://github.com/example/example.git"
  },
  "devDependencies": {
    "tslint": ">=3.5.0",
    "typings": ">=0.6.8",
    "typescript": "^1.8.7"
  }
}

如果只依赖于 angular2，那么只需要在 dependencies 中写入 angular2，其他由 angular2 依赖的项（即子依赖）可以由用户自行决定是否写入。我们通过 script 中的 prepublish 在发布 npm 包时指定进行 TypeScript 编译。TypeScript 的编译配置在下面的 tsconfig 中进行设置。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "declaration": true,
    "moduleResolution": "node",
    "rootDir": "lib"
  },
  "files": [
    "node_modules/angular2/typings/browser.d.ts",
    "lib/components.ts",
    "lib/components/fa-stack.component.ts",
    "lib/components/fa.component.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

如果我让它可以在 Angular2 快速入门示例中进行导入，它就会变成这样。也许还有更好的写法。

发布软件包

可以在公開之前本地使用 npm link 命令进行测试，这很方便。

    • 3分でできるnpmモジュール

 

    npm linkが意外と便利だった

试着使用自己制作的东西

angular2-example-library をインポートするときのパスを指定する(SystemJS)

angular2-example-library インポート時に拡張子(js)を補完するようにする (SystemJS)
実際に使うファイルで import する

这个示例代码是Angular2 QuickStart的一个例子。

<script>
  System.config({
    defaultExtension: 'js',
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      // これを書かないとロードするときに .js 拡張子が補完されなかった
      "angular2-example-library": {"defaultExtension": 'js'}
    },
    map: {
      // 実際のファイルのパスを指定する。
      'angular2-example-library': 'node_modules/angular2-example-library/lib'
    }
  });
  System.import('app/main').then(null, console.error.bind(console));
</script>

// インポートする
import {ExampleComponent} from 'angular2-example-library/components';

@Component({
  selector: 'my-app',
  template: '<example></example>',
  directives: [ExampleComponent], // 利用可能
})
export class AppComponent {}

只要浏览器打开时， 被转换成功，就表示成功！

在最后

我已经尝试创建了一个Angular2的库。
我正在研究npm包创建的最佳实践，并且还发现了目录结构和配置文件等方面有改进的空间。

顺便说一下，我正在开发的项目是 angular2-fontawesome（尚未完成）。在 Angular 1.x 的指令中，貌似没有类似于 replace: true 的行为来替换标签（正在讨论中？），因此暂时停止开发，等待实现。

由于 Angular2 目前还处于Beta版，所以需要注意其行为在未来可能发生改变的可能性。

感谢您一直阅读到最后。

请参考

    • How to create an Angular 2 component library, and how to consume it using SystemJs or Webpack

 

    • 3分でできるnpmモジュール

 

    • npm linkが意外と便利だった

 

    • npm-scripts

 

    angular2-fontawesome
bannerAds