Question

我正在开发UI组件，以便在整个公司的不同Web项目中使用。我们希望在我们的本地存储库中将组件作为npm包发布，理想情况下包含源代码（用于调试）。我找到this article关于导出Angular组件并坚持使用它。

不幸的是，当我在另一个项目中安装并导入包时，找不到该模块：

import { TidUIComponentsModule } from '@tid/ui-components';

src / app / app.module.ts（4,40）中的错误：错误TS2307：找不到模块＆＃39; @ tid / ui-components＆＃39;。

（ES5 / ES6 / TS？）模块应该放在npm包中的哪个位置？这需要哪种配置？

打包前的目录结构如下所示：

使用 package.json ：

{
   "name": "@tid/ui-components",
   "version": "0.0.1",
   "main": "./bundles/tidcomponents.umd.js",
   "module": "./index.js",
   "typings": "./index.d.ts",
   "peerDependencies": {
      "@angular/core": "5.0.3",
      "@angular/common": "5.0.3",
      "@angular/forms": "5.0.3",
      "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6"
   },
   "license": "proprietary",
   "publishConfig": {
      "registry": "http://maven/repository/npm-internal/"
   },
   "files": [
      "dist"
   ]
}

index.ts：

export { TidUIComponentsModule } from './src/tid-ui-components.module';
export { ButtonComponent } from './src/components/button/button.component';
export { FormComponent } from './src/components/form/form.component';
export { FormRowComponent } from './src/components/form-row/form-row.component';

rollup.config.js

export default {
   input: 'dist/index.js',
   output: {
      format: 'umd',
      file: 'dist/bundles/tidcomponents.umd.js'
   },
   exports: 'named',
   sourceMap: false,
   name: 'tid.components',
   globals: {
      '@angular/core': 'ng.core',
      '@angular/common': 'ng.common',
      '@angular/forms': 'ng.forms',
      '@ng-bootstrap/ng-bootstrap': 'ngb.ng-bootstrap',
   },
   external: [
      '@angular/core',
      '@angular/common',
      '@angular/forms',
      '@ng-bootstrap/ng-bootstrap'
   ]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "@angular/common": ["node_modules/@angular/common"],
      "@angular/forms": ["node_modules/@angular/forms"],
      "@ng-bootstrap/ng-bootstrap": ["node_modules/@ng-bootstrap/ng-bootstrap"]
    },
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

用ngc && rollup -c && uglifyjs dist/bundles/tidcomponents.umd.js --screw-ie8 --compress --mangle --comments all --output dist/bundles/tidcomponents.umd.min.js打包后，会创建此结构：

在npm install之后，node_modules中的文件夹如下所示：

Answer 1

这个导入可能有效：

import { TidUIComponentsModule } from '@tid/ui-components/dist';

因为index所在的位置和bundles文件夹。我相信更改package.json就足够了：

将您的main，module和typings条目更改为：

"main": "./dist/bundles/tidcomponents.umd.js",
"module": "./dist/index.js",
"typings": "./dist/index.d.ts",

您还应该向angularCompilerOptions添加一些额外的tsconfig.json，并可能将ngc引导至此配置：

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "flatModuleOutFile": "index",
    "flatModuleId": "tid-components"
}

并使用以下方式打包：

ngc -p ./tsconfig.json && rollup ... etc

打包Angular 5 UI组件 - 找不到模块

1 个答案: