Parcel JS：tree.render 不是函数

Posted 2023-02-23

【中文标题】Parcel JS：tree.render 不是函数

【英文标题】：Parcel JS: tree.render is not a function

【发布时间】：2021-07-09 06:15:41

【问题描述】：

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

【参考方案1】：

事实证明，您可以通过将 htmlnano 配置为 not 缩小 SVG 来解决此问题。

将.htmlnanorc 文件添加到项目根目录，JSON 配置对象如下：

    "minifySvg": false

文档的相关部分是here for V1（实际上没有提到minifySvg设置）或here for V2。

【参考方案2】：

在我的情况下，它可以使用以下内容将 .htmlnanorc.js 添加到我的项目根目录：

module.exports = 
    "minifySvg": false
  

【参考方案3】：

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

【参考方案4】：

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

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

注意：我不确定这样做是否会降低效率/优化。

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