包裹 JS：tree.render 不是函数

Question

每当我尝试运行生产构建命令 npm run build 或 npx parcel build index.html 时，我都会收到此错误。我有一个简单的 html 和 css 项目，没有反应，没有第 3 方库为什么会发生这种情况？我已经尝试过包裹版本 1.12.3、1.12.4 和 1.12.5。

这里是错误：

/Users/user/Documents/HTML Apps/Project/index.html: tree.render is not a function
at /Users/user/Documents/HTML Apps/Project/node_modules/htmlnano/lib/modules/minifySvg.js:19:23
at /Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:91:45
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:26)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/user/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Project@1.0.0 build: `parcel build index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Project@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2021-04-14T07_44_52_872Z-debug.log

Answer 1

事实证明，您可以通过将 htmlnano 配置为 而不是 缩小 SVG 来解决这个问题。

将 .htmlnanorc 文件添加到您的项目根目录，使用 JSON 配置对象，如下所示：

{
    "minifySvg": false
}

文档的相关部分是 here for V1 (which actually doesn't mention the minifySvg setting) or here for V2。

Answer 2

在我的例子中，它通过以下方式将 .htmlnanorc.js 添加到我的项目根目录：

module.exports = {
    "minifySvg": false
  }

Answer 3

parcel build --no-minify index.html 它会跳过包裹的优化，让你继续。希望对您有所帮助。非常简单的方法请投票

Answer 4

在我的例子中，它通过使用 IMG 标签和 SVG 作为 src 来工作。

你可以自己权衡利弊： Adding vector graphics to the Web | MDN

注意：我不确定这样做是否更少efficient/optimized。

如果有人发现此方法有任何问题，请告诉我:)

包裹 JS：tree.render 不是函数

Parcel JS: tree.render is not a function

html

javascript

svg

npm

parceljs