导入带有Tyepscript支持的自定义Angular库

时间:2018-07-09 21:25:52

标签: angular typescript tsconfig angular-library

我创建了一个自定义的角度/离子库,我想npm安装并将其导入到其他项目中。我可以这样做

import {SharedModule} from 'library-name/src';

但是,当我仅将其保留为“ library-name”而没有src时,它会抱怨找不到模块。 tsconfig的工作还是package.json的工作告诉打字稿编译器库src下的index.ts是主文件?我都将它们设置为

for tsconfig.json
"files":["./src/index.ts"]

and for package.json as
"main":["./src/index.ts"]

另外,对我来说,将其保留在'library-name / src'中是不可行的,因为出于某种原因,当我清楚地导入打字稿文件时,我看到ENOENT index.js不是文件。超级困惑!

1 个答案:

答案 0 :(得分:1)

您的包裹可能需要更多的工作。我建议使用Sinopia Server托管您的内部npm软件包。

https://github.com/rlidwka/sinopia

要将其作为服务运行,请使用此处找到的init.d脚本。

https://github.com/ramiel/sinopia-scripts

配置文件位置/etc/sinopia/config.yaml

要创建一个npm软件包并将其发布到sinopia,我建议对gulp任务运行器进行以下脚本修改:

var bump = require('gulp-bump'),
del = require('del'),
exec = require('child_process').exec,
gulp = require('gulp'),
merge = require('merge2'),
typescript = require('gulp-typescript'),
fs = require('fs');

gulp.task('clean', function () {
del(['dist/*']);
});

gulp.task('bump', ['clean'], function () {
gulp.src('./package.json')
    .pipe(bump({
        type: 'patch'
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('bundle', ['bump'], function () {
var tsResult = gulp.src('lib/*.ts')
    .pipe(typescript({
        module: "commonjs",
        target: "es5",
        noImplicitAny: true,
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        outDir: "dist/",
        rootDir: "lib/",
        sourceMap: true,
        declaration: true,
        moduleResolution: "node",
        removeComments: false,
        "lib": [
            "es2017",
            "es2016.array.include",
            "dom"
          ],
        types: ["jasmine"]
    }));

return merge([
    tsResult.dts.pipe(gulp.dest('dist/')),
    tsResult.js.pipe(gulp.dest('dist/'))
]);
});

gulp.task('copy', ['bundle'], () => {

gulp.src(['README.md'])
    .pipe(gulp.dest('dist/'));
});

gulp.task('package', ['copy'], () => {

const pkgjson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));

delete pkgjson.scripts;

delete pkgjson.devDependencies;

const filepath = './dist/package.json';

fs.writeFileSync(filepath, JSON.stringify(pkgjson, null, 2), 'utf-8');

});

gulp.task('git-add', ['package'], function (cb) {
exec('git add -A', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});


gulp.task('git-commit', ['git-add'], function (cb) {

var package = require('./package.json');

exec('git commit -m "Version ' + package.version + ' release."', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

gulp.task('git-push', ['git-commit'], function (cb) {

exec('git push', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

gulp.task('publish', ['git-push'], function (cb) {

exec('npm publish ./dist', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
});
});

这定义了几个命令。

如果您运行gulp publish,它将按顺序运行所有命令,这些命令将清理构建目录,打包文件,提交,推送,然后发布程序包。