如何在npm上发布angular 2 typescript库

Question

我为angular 2创建了一个打字稿库,便于访问我的后端服务.

到目前为止它是一个私人仓库,但我想将它作为开源库上传到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是否是正确的选择..或者应该捆绑和缩小或不缩小.任何提示和tipps都是受欢迎的!

干杯

Answer 1

Angular University 有一个很好的分步教程，介绍如何将 Angular 2 库发布到 npm，可以解决您的疑虑/问题。

如果您愿意，您可以提供捆绑和非捆绑版本，但我始终会提供非捆绑版本。在我的库中，我不提供捆绑版本，而是让消费者自行捆绑和缩小。

http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/

更新的答案

以下步骤将完成创建、测试和发布未捆绑的 Angular 模块的过程，以供消费者使用捆绑器（webpack、Angular cli 等）使用。有关包括捆绑在内的更完整的答案，请参阅@OleksiiTrekhleb 的答案。

发布 Angular 2 库可能会令人生畏，但当它发布时，它实际上与在 NPM 上发布任何其他包没有什么不同。以下信息将使用文件夹结构：

• 包根目录
  • 源代码
  • 距离

1. 设置 tsconfig.json

与任何打字稿库一样，您希望在下面将declaration选项设置为 true以确保我们的消费者可以利用我们包中的类型：tsconfig.jsoncompilerOptions

"declaration": true

我们还想compilerOptions指定outDir将转译代码与源代码分开：

"outDir": "./dist"

我们希望该include选项指向我们的源文件夹（注意include是与 相关的同级文件夹compilerOptions）：

"include": [
  "./src"
]

启用以下实验性装饰器选项compilerOptions：

"experimentalDecorators": true,
"emitDecoratorMetadata": true 

skipLibCheck为了避免转译时出现一些错误，您还需要启用：

"skipLibCheck": true

结果

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "skipLibCheck": true,
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    "strict": true,                            /* Enable all strict type-checking options. */
    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "include": [
    "./src"
  ]
}

2. 模块

此示例将使用具有单个组件的模块。该组件相当简单：

./src/helloWorld/helloWorld.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'hello-world',
    template: '<div>Hello, world</div>'
})
export class HelloWorldComponent {

}

该模块应将消耗性组件添加到declarations和exports。我们需要添加导出，以便当消费者导入我们的模块时，他们也可以使用我们的组件。

./src/helloWorld/helloWorld.module.ts

import { NgModule } from '@angular/core'
import { HelloWorldComponent } from './helloWorld.component';

const components: any[] = [
    HelloWorldComponent
];

@NgModule({
    declarations: components,
    exports: components // Don't forget to export!
})
export class HelloWorldModule {

}

3. 桶体

为了简化模块的导入，我们使用了一个桶，该文件导出所有供消费者使用的内容。

./src/index.ts

export { HelloWorldModule } from './helloWorld/helloWorld.module';
export { HelloWorldComponent } from './helloWorld/helloWorld.component';

4. 设置NPM

包.json

在 中package.json，更改main属性以指向我们的转译桶./dist/index.js。还要添加typings属性以指向我们的木桶定义文件./dist/index.d.ts。

prepublish在您的package.json.

"scripts": {
    "prepublish": "tsc"
}

另请注意，您的角度和相关依赖项应该位于peerDependencies而不是dependencies

NPM 忽略

.npmignore在包的根目录中创建一个文件，并忽略该src文件夹以及您不想与包一起发布的任何其他文件

src/
*.log

5. 测试

您可以使用npm link轻松在本地测试您的 npm 包。在模块包文件夹中，运行命令npm link。

然后在您的测试项目中运行命令npm link <my package name>

现在，您可以导入模块并将其添加到测试项目导入中，而无需发布。

6. 出版

现在可以使用简单的npm 发布来发布您的包