Angular 5 - Как генерировать файлы определений
Я пробовал несколько способов, но я не могу понять, как генерировать файлы определений для моего проекта. У меня есть два приложения, сгенерированных angular-cli A и B, я хочу, чтобы A использовал B как пакет (с ссылкой npm). Насколько я понимаю, мне нужно создать файл index.ts в проекте B со всеми модулями, которые я хочу экспортировать, и выполнить команду 'ng build'. Я видел, что это создает только пакеты, но не файлы определений, как я могу генерировать файлы определений? Это правильный подход?
Я пробовал некоторые другие варианты, такие как "rollup" и "ngmakelib", но, кажется, довольно сложно выполнить эту простую задачу. Есть ли у нас простой способ генерировать проекты Angular 5 в виде библиотек и использовать эти библиотеки из других проектов?
1 ответ
На высоком уровне, вот шаги, которые вам нужно сделать, чтобы создать повторно используемый модуль Angular (все это делается без веб-пакета):
Создать
public_api.tsфайл в вашемsrcпапка. Он должен содержать все ваши экспортированные символы, чтобы пользователи вашей библиотеки могли делать:import { symbol } from 'your-library'Скопируйте свой
srcпапка вbuild/distпапка убедитесь, что встроенные шаблоны. я используюgulpа такжеgulp-inline-ng2-templateза это.
gulpfile.js
const gulp = require('gulp');
const replace = require('gulp-replace');
const inlineNg2Template = require('gulp-inline-ng2-template');
const del = require('del');
gulp.task('clean', function () {
return del([
"dist/**"
], { force: true });
});
gulp.task('copy-public-api', ['clean'], function () {
return gulp.src([
'../src/public_api.ts'
])
.pipe(replace('./app', './src'))
.pipe(gulp.dest('dist'))
});
gulp.task('copy-src', ['copy-public-api'], function () {
return gulp.src([
'../src/app/**/*.ts',
'!../src/app/**/*.spec.ts'
])
.pipe(inlineNg2Template({ base: '../src', useRelativePaths: true }))
.pipe(gulp.dest('dist/src'))
});
public_api.ts
export * from './app/app.module';
// ... other exports ...
- Создайте файл tsconfig для
ngc, Вы будете использоватьngcгенерировать необходимые файлы метаданных. Вот настройки, которые я использую. Файл помещается в папку "build" (обратите внимание на относительные пути дляtypeRootsа такжеpaths).
строить /tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"rootDir": ".",
"outDir": "",
"paths": {
"*": [
"../node_modules/*"
]
},
"declaration": true,
"stripInternal": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"module": "es2015",
"target": "es5",
"lib": [
"es2015",
"dom"
],
"skipLibCheck": true,
"typeRoots": [
"../node_modules/@types/"
],
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true,
"inlineSources": true
},
"files": [
"dist/public_api.ts"
],
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": false,
"skipTemplateCodegen": true,
"flatModuleOutFile": "index.js",
"flatModuleId": "ng-module-template"
}
}
angularCompilerOptions убедитесь, что создан один файл метаданных (index.js).
использование
ngcскомпилировать модуль из папки сборки. Обязательно установите@angular/compilerа также@angular/compiler-cli:../node_modules/.bin/ngc -p tsconfig.jsonРазверните только те файлы, которые вам нужны. Я развернул из
build\distвdist:gulp.task('build', [], function (done) { gulp.src([ 'dist/index.js', 'dist/public_api.js', 'dist/index.metadata.json', 'dist/**/*.d.ts', '!../src/app/**/*.spec.ts' ], { base: 'dist' }) .pipe(gulp.dest('../dist')) .on('end', function () { del('dist/**', { force: true }).then(function () { done(); }); }); });Убедитесь, что вы изменили свой package.json так, чтобы он указывал на index.js:
{ "name": "ng-module-template", "version": "1.0.0", "description": "", "main": "dist/index.js", "typings": "dist/index.d.ts", }
Необязательно: создание пакетов
Вот целевая сборка gulp для компиляции и создания пакетов с использованием накопительного пакета с treehaking:
gulp.task('compile', ['copy-src'], function (done) {
gulp.src('tsconfig.json')
.pipe(shell(['"../node_modules/.bin/ngc" -p <%= file.path %>']))
.on('end', function () {
del('node_modules/**', { force: true }).then(function () {
done();
});
});
});
gulp.task('bundle', ['compile'], function (done) {
var external = [
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated'
];
var globals = {
'@angular/core': 'vendor._angular_core',
'@angular/http': 'vendor._angular_http',
'@angular/platform-browser': 'vendor._angular_platformBrowser',
'@angular/platform-browser-dynamic': 'vendor._angular_platformBrowserDynamic',
'@angular/router-deprecated': 'vendor._angular_routerDeprecated'
};
rollup.rollup({
input: 'dist/index.js',
onwarn: function (warning) {
if (warning.message.indexOf("treating it as an external dependency") > -1)
return;
console.warn(warning.message);
}
}).then(function (bundle) {
var umd = bundle.write({
file: `dist/bundles/${pkg.name}.umd.js`,
format: 'umd',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var cjs = bundle.write({
file: `dist/bundles/${pkg.name}.cjs.js`,
format: 'cjs',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var amd = bundle.write({
file: `dist/bundles/${pkg.name}.amd.js`,
format: 'amd',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
var es = bundle.write({
file: `dist/index.es5.js`,
format: 'es',
exports: 'named',
name: pkg.name,
sourcemap: true,
external: external,
globals: globals
});
return Promise.all([umd, cjs, amd, es]).then(function () {
done();
});
});
});
Исходный код Демо
Предварительные условия
Angular5 +
Git (устанавливается локально, если вы публикуете в локальной папке)
https://github.com/angular-patterns/ng-module-template
Построить цели
Npm Run Dev
Для развития
npm run build
Для сборки производственного приложения (вывод в папку dist)
npm run build-module
Для сборки модуля (вывод в папку dist)
Npm Run Publish
Для публикации в c:\packages используя мерзавец Или запустить npm publish опубликовать в npm,
npm run name-module --(имя модуля)
Для именования модуля. Это изменяет источник.
Установка из c:\packages
npm install c:\packages\<module-name>