使用 Typescript 支持导入自定义 Angular 库

Question

我创建了一个自定义 angular/ionic 库，我想将它 npm install 并导入到我的其他项目中。我可以这样做

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

但是，当我只将它留在没有 src 的 'library-name' 时，它会抱怨它找不到模块。是 tsconfig 的工作还是 package.json 的工作来告诉 typescript 编译器库的 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 不是文件。超级迷茫！

Answer 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，它将按顺序运行所有命令，清理构建目录、打包文件、提交、推送，然后发布包。