Question

我有一个库，可导出一组Web组件。该捆绑包是使用汇总创建的，并且所有导出均已就位，例如：
export { Input, Button };，其中Input和Button是捆绑软件中较早定义的es6类。
我已经将它作为npm软件包发布到一个私有的npm存储库中，现在正尝试导入到另一个有角度的应用程序中
import { Input, Button } from '../../node_modules/@company/web-components';
我也尝试将它们导入为import '../../node_modules/@company/web-components';
但是webpack似乎在摇摇欲坠，因为它看不到它的使用位置。但是，有趣的是，当库导出为iife时，Webpack不会对其进行树状摇动。

是否有一种方法可以告诉angular的webpack包括特定的导入内容，而不管代码中是否引用了该导入内容？

Answer 1

很显然，有一种方法可以通过向node_modules添加以下行来从angular.json包括es6模块：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "release.js",
                "input": "./node_modules/@company/web-components/dist/",
                "output": "."
              }
            ],

然后我们可以通过典型的模块导入将其包含在index.html中：

<script type="module" src="release.js"></script>

在Angular中导入Web组件（导出为es6模块）

1 个答案: