Question

我被困在如何创建一个AngularX（2+）组件并在npm上发布它。我的目标是发布我在当前Angular App中创建的模态组件，但是现在我只想创建一个<hello-world>组件。我希望我的组件也能用TypeScript编写。

我应该采取哪些步骤来实现这一目标？我想我必须从npm init开始，也许npm install --save @angular/core？我应该创建哪些文件，我应该如何编写它们？（即：我应该添加一个tsconfig.json？）

Answer 1

我终于找到了这样做的方法，这是我创建npm模块的方法：

第1步：创建一个文件夹“helloworld”

首先，创建一个空文件夹（您可以按照自己的意愿命名，在这里我将其命名为“helloworld”）。它将包含模块的所有文件

第2步：npm init

然后，您必须在刚刚创建的文件夹中打开一个命令窗口并输入npm init，就像任何npm包一样。您将定义包名称，描述，主文件以及其他一些数据。如果要创建包含 Typescript 的模块，请在询问主文件时键入main.ts。完成后，此命令将在您的文件夹中生成 package.json 文件。

第3步：npm install --save @ angular / core rxjs zone.js

现在你必须安装Angular和rxjs + zone.js（Angular需要的依赖）。现在，输入命令npm install --save @angular/core rxjs zone.js。你应该有一个看起来像我的文件，这是我的 package.json ：

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "my first npm package",
  "main": "index.ts",
  "scripts": {
    "prepublish" : "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/core": "^4.2.5",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.12"
  }
}

步骤3.1：添加额外的脚本“prepublish”
也许你注意到我的脚本值有一个额外的行：“prepublish”。这条线以后会有用;当我们发布我们的包时（在npm服务器上发送文件之前），npm将调用 prepublish 命令。在这里，此命令将调用tsc来编译 .js 文件中的 .ts 文件。为此，您还需要一个名为 tsconfig.json 的文件。

步骤4：创建文件“tsconfig.json

当您在.js文件中编译.ts文件时，将使用此文件。这是我的 tsconfig.json 文件：

{
  "compilerOptions": {
    "removeComments": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "emitDecoratorMetadata": true,  //  Needed by Angular
    "experimentalDecorators": true, // Needed by Angular
    "sourceMap": false,
    "outDir": "./dist",             // Output directory  
    "lib": ["es6", "dom"],
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "files": [
    "./index.ts"                     // File to compile
  ],
  "include": [
    "lib"                            // Where you files are stored
  ],
  "exclude": [
    "node_modules"
  ]
}

步骤5：创建文件夹“dist”和“lib”，创建“index.ts”文件

现在您必须创建两个目录：dist和lib。 dist将包含已编译的文件，lib将包含您的文件。创建一个index.ts文件，其中包含需要在lib文件夹中导出的所有组件。

这是我的index.ts文件：

export * from "./lib/helloworld.component";

步骤6：在lib文件夹

中创建helloworld.component.ts

然后，转到lib文件夹并创建组件文件： helloworld.component.ts 。这是我的：

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

@Component({
    selector: "helloworld",
    template: "Hello cool world, I'm your npm component !"
})
export class HelloWorldComponent {      
}

步骤7：创建“.gitignore”和“.npmignore”文件

现在您的组件已准备好，在发布之前，您必须编写.gitignore文件（如果要在Git上发布代码）和.npmignore文件。您不需要在Git上存储文件夹 node_module 或生成的文件。所以这是我的 .gitignore :(我添加了.idea和*.iml，因为我正在使用IntelliJ Idea创建文件夹和file.iml）

.idea
node_modules
dist
*.iml

然后，对于 .npmignore 几乎完全相同，只需要你的ts文件：

.idea
*.iml
*.ts

步骤8：运行发布命令或链接以测试模块

如果要在将模块发送到npm服务器之前测试模块，请转到根软件包文件夹（与package.json处于同一级别）并运行npm link。完成后，转到Angular项目并运行npm link helloworld：它将获得您的软件包，如果它在npm服务器上，您可以在项目中使用它来检查一切是否正常。

如果要在npm服务器上发布它，请运行npm publish。请记住，如果您想更新软件包，则必须在更新软件包版本后重新运行npm publish。为此，只需运行npm version [patch | minor | major]即可升级您的补丁或次要/主要版本！

如何创建一个Angular 2+组件并将其放在npm上

1 个答案: