Angular不尊重package.json中的浏览器字段

Question

复制步骤：

1. npm install @angular/cli
2. npx ng new my-app（按Enter键显示默认提示）
3. cd my-app
4. npx ng build（注意，它起作用）
5. npm install --save ethers
6. 将import { BigNumber } from 'ethers/utils'添加到my-app/src/app/app.component.ts
7. 将foo = new BigNumber(0)添加到AppComponent中的my-app/src/app/app.component.ts类中
8. npx ng build（注意失败）

这里的问题是ethers库的package.json具有：

{
    "main": "./index.js",
    "browser": "./dist/ethers.min.js",
}

根据webpack documentation，webpack应该使用./dist/ethers.min.js。但是，从错误中我们可以看到它正在尝试使用./index.js，这是基于它试图读取属于NodeJS构建而不是浏览器构建（完全位于{ {1}}子目录。

为什么Angular不尊重dist中的browser字段？为了解决此问题，我需要做什么？

Answer 1

问题是我正在以import { BigNumber } from 'ethers/utils'的形式进行导入。这种导入方式会绕过main上的browser或package.json属性，这意味着无论那里的版本是什么，我都在拉入节点版本。

该解决方案，从混合目标依赖项导入时，切勿使用import { ... } from '.../<something>'。