javascript - 为什么我使用 microbundle 创建的 react 库包直接引用图像资产而不是使用 require？

Question

我有一个与microbundle-crl. 现在我将很多依赖项更新到了较新的版本（Typescript 3 → 4，react 16 → 17 等）。

现在，当我使用捆绑我的库时，生成的.js文件会以这种方式加载图像资产。这在index.js和 在index.modern.js：

var favicon_32 = "favicon-32x32~cxRHXXYf.png";

以下是我package.json文件的（恕我直言）相关部分：

{
  "name": "…",
  "version": "…",
  "description": "…",
  "author": "…",
  "license": "…",
  "repository": "…",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.tsx",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "dist",
    "icon"
  ],
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepublish": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "primeflex": "^2.0.0",
    "primeicons": "4.x",
    "primereact": "6.x",
    "react": "^17.0.0",
    "react-intl": "^5.20.4"
  },
  "devDependencies": {
    "archiver": "^5.3.0",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.3",
    "eslint": "7.x",
    "eslint-config-prettier": "8.x",
    "eslint-config-standard": "16.x",
    "eslint-config-standard-react": "11.x",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "5.x",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-standard": "5.x",
    "fs": "0.0.1-security",
    "ftp-deploy": "^2.3.8",
    "gh-pages": "3.x",
    "isomorphic-git": "^1.8.1",
    "microbundle-crl": "^0.13.8",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "primeflex": "^2.0.0",
    "primeicons": "4.x",
    "primereact": "6.x",
    "react": "17.x",
    "react-cookies": "^0.1.1",
    "react-dom": "17.x",
    "react-helmet-async": "^1.0.9",
    "react-intl": "5.x",
    "react-scripts": "4.x",
    "typescript": "4.x"
  },
  "dependencies": {
     …
  }
}

虽然在我更新之前它看起来像

var favicon_32 = "favicon-32x32~cxRHXXYf.png";

当然，第一个版本不再工作了。

我不明白发生了什么，我也不知道如何影响这种行为。我试着摆弄不同的模块类型，但我完全糊涂了。我区分了新旧版本，我找不到任何应该导致这种变化的东西。

如何microbundle-crl决定如何处理我的图像导入？我怎样才能影响它？

标签： javascriptnpmmicrobundle