как опубликовать угловую библиотеку типов 2 на npm

Я создал библиотеку типов для углового 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 - это даже правильный выбор. Или, если он нужен, он должен быть упакован и минимизирован. Любые подсказки и подсказки приветствуются!

ура

Ответы

Ответ 1

Угловой университет имеет хорошее, шаг за шагом, учебное пособие по публикации библиотеки Angular 2 для npm, которая затрагивает ваши проблемы/вопросы.

Вы можете предоставить комплектную и раздельную версию, если хотите, я всегда предоставлял бы раздельную версию. В моих библиотеках я не предоставляю пакетную версию и оставляю ее до потребителя, чтобы расслоение и минимизация.

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

Обновленный ответ

Следующие шаги будут проходить процесс создания, тестирования и публикации разделенного углового модуля для потребления потребителем с помощью связки (webpack, угловой cli и т.д.). Для получения более полного ответа, который включает связывание, см. @OleksiiTrekhleb ответ.

Публикация угловой библиотеки 2 может быть пугающей, но когда дело доходит до нее, это действительно ничем не отличается от публикации любого другого пакета на NPM. Следующая информация будет использовать структуру папок:

  • корень пакета
    • ЦСИ
    • расстояние

1. Настройка tsconfig.json

Как и в любой библиотеке типов, вы хотите, чтобы параметр declaration установлен в true в tsconfig.json под compilerOptions чтобы наши потребители могли использовать типы внутри нашего пакета:

"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

Package.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 локально с помощью ссылки npm. В папке пакета модуля запустите команду npm link.

Затем в тестовом проекте запустите команду npm link <my package name>

Теперь вы можете импортировать свой модуль и добавить его в свои проекты тестовых проектов без публикации.

6. Издательский

Теперь ваш пакет может быть опубликован с простой публикацией npm

Ответ 2

Сам процесс публикации довольно прост:

# 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 - комплект UMD, готовый к использованию SystemJS
  • index.umd.min.js - сокращенная версия пакета для сохранения трафика пользователя
  • index.umd.js.map, index.umd.min.js.map - для цели отладки
  • *.js - [созданный tsc, помните, что ngc является оберткой] скомпилировал JavaScript-представление компонентов или файлов службы *.ts вашей библиотеки.
  • *.d.ts - [созданный tsc, помните, что файлы объявлений ngc являются оберткой]. Поскольку файлы *.ts с типами передаются в файлы *.js, которые не поддерживают типизацию, то компилятору TypeScript необходимо поместить все типы информации в файлы *.d.ts, чтобы иметь возможность использовать эти *.js файлы в TypeScript проектов позже. Кстати, есть проект DefinitelyTyped с множеством определений типов, которые уже были внесены для большого количества библиотек JS, отличных от TypeScript.
  • *.metadata.json - метаданные, связанные с текущим компонентом (или NgModule). Это своего рода JSON-представление объектов, которые мы передаем декораторам @Component, @NgModule. Этот файл содержит информацию о том, что NGC будет нуждаться в проектах (а не в библиотеках), которые были в исходной библиотеке *.ts файлов, но не были включены в файлы *.d.ts.

В этом случае ваш файл package.json должен быть уведомлен о ваших файлах сборки через поля main, module и typings:

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

Вы можете найти более подробное описание того, какие файлы должны находиться в папке dist и как их скомпилировать в разделе Как создать библиотеку Angular 4 AOT/JIT с внешними шаблонами SCSS/HTML

Ответ 3

Для тех, кто все еще пытается понять, как это сделать:

  1. Создайте свою библиотеку с помощью генератора @jvandemo Angular Lib Yeoman

  2. После этого вы просто запускаете: npm adduser и npm publish

Ответ 4

Я работал с/записывал несколько библиотек Angular (2+), и процесс связывания и публикации всегда был болезненным, я нашел этот инструмент, который выполняет всю работу, и делает библиотеку готовой к отправке с ES5, ES6 и Формат CommonJS.

Он очень прост в использовании, вы просто помещаете один файл (входной файл) в свой tsconfig, и я сканирую все ваши файлы и свяжусь с вашей Угловой библиотекой, ее встроенными стилями и шаблонами компонентов!

Я думал, что это будет полезно для других.

Удачи.