angular - 如何在 npm 上发布 angular 2 typescript 库

Question

我已经为 angular 2 创建了一个 typescript 库，它有助于访问我的后端服务。

到目前为止它是一个私有(private)仓库，但我想将它作为开源库上传到 github 并在 npm 上注册。

我不太确定现在该做什么，因为关于这个主题的文档不容易找到。

文件夹结构如下所示:

src
|--sdk.ts // entry point
|--services
   |--auth.ts
   |--database.ts
   |--5 more ts files
|--utils
   |--utils.ts
   |--interfaces.ts
|--tests (8 ..spec.ts files)

我的入口点 (sdk.ts) 看起来像这样

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Injectable } from '@angular/core';
import { SelfbitsDatabase } from './services/database';
import { SelfbitsAuth } from './services/auth';
import { SelfbitsAppConfig } from './utils/interfaces';
import { SelfbitsFile } from './services/file';
import { SelfbitsUser } from './services/user';
import { SelfbitsDevice } from './services/device';
import { SelfbitsPush } from './services/push';
import { HttpModule } from '@angular/http';

@Injectable()
export class SelfbitsAngular {
    constructor(
        public auth : SelfbitsAuth,
        public database : SelfbitsDatabase,
        public file : SelfbitsFile,
        public user : SelfbitsUser,
        public device: SelfbitsDevice,
        public push : SelfbitsPush
    ){}
}

export const SELFBITS_PROVIDERS:any[] = [
    SelfbitsAngular,
    SelfbitsAuth,
    SelfbitsDatabase,
    SelfbitsFile,
    SelfbitsUser,
    SelfbitsDevice,
    SelfbitsPush
];

@NgModule({
    providers:SELFBITS_PROVIDERS,
    imports:[ HttpModule ]
})

export class SelfbitsAngularModule{
    static initializeApp(config:SelfbitsAppConfig):ModuleWithProviders{
        return {
            ngModule:SelfbitsAngularModule,
            providers:[
                { provide: 'SelfbitsConfig', useValue: config }
            ]
        }
    }
}

这里是 webpack.config.js，它并没有真正做我想要的......

module.exports = {
    entry:'./src/sdk.ts',
    output:{
        path: helpers.root('dist'),
        filename:'selfbitsangular2sdk.js'
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude:'/test/',
                loaders: ['ts-loader']
            }
        ]
    }
};

我不确定 webpack 是否是正确的选择..或者是否应该 bundle 和缩小。欢迎任何提示和提示!

干杯

Answer 1

发布过程本身非常简单:

# Login with your existing npm user
npm login

# Bump library version
npm version --patch

# Publish your library
npm publish

最难的部分是正确准备您的 package.json 的内容和将保存您构建库的文件夹(一种常见的命名方式是 dist).

您的 dist 文件夹应该包含可供 Angular JIT 项目和 Angular AOT 项目使用的文件。它还应该包含您的库包，可供浏览器直接使用(比方说通过 SystemJS)。

因此，您的 dist 文件夹应包含以下文件:

• index.umd.js - 已准备好供 SystemJS 使用的 UMD 包
• index.umd.min.js - 用于节省用户流量的压缩包
• index.umd.js.map, index.umd.min.js.map - 用于调试目的
• *.js — [由 tsc 生成，请记住 ngc 是一个包装器] 已编译的组件或服务的 JavaScript 表示您的库的 *.ts 文件。
• *.d.ts — [由tsc制作，记住ngc是一个wrapper]声明文件。由于带有类型的 *.ts 文件被转换为不支持类型的 *.js 文件，因此 TypeScript 编译器需要将所有类型信息放入单独的 *.d.ts 文件中，以便能够使用这些 *.js 文件之后在 TypeScript 项目中。顺便说一句，有一个 DefinitelyTyped 项目，其中包含许多类型定义，这些类型定义已经为大量 JS 非 TypeScript 库做出了贡献。
• *.metadata.json — 与当前组件(或 NgModule)关联的元数据。它是我们传递给@Component、@NgModule 装饰器的对象的一种 JSON 表示。此文件包含项目(而非库)的 NGC 所需的信息，这些信息位于原始库 *.ts 文件中，但未包含在 *.d.ts 文件中。

在这种情况下，您的 package.json 应该通过 main、module 和 typings 字段通知您有关构建文件的信息:

 {
   ...
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   ...
 }

您可能会在 How to create AOT/JIT compatible Angular 4 library with external SCSS/HTML templates 中找到有关dist 文件夹中应包含哪些文件以及如何编译它们的更详细说明。文章