Nodejs：某个 package 的库文件未经 babel 处理，导致 browserify 时报错

发布于 1周前 作者 htzhanglong 来自 nodejs/Nestjs

Nodejs：某个 package 的库文件未经 babel 处理，导致 browserify 时报错

加入了 graphviz-react 这个库后，browserify 报错：

[19:56:19] Error: 
xxx/node_modules/graphviz-react/lib/Graphviz.js:1
import * as React from 'react';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

然而其他的库都没问题。所以看了下这个 Graphviz.js ，发现它并没有经过 babel 转码处理？

import * as React from 'react';
import { graphviz } from 'd3-graphviz';
class Graphviz extends React.Component {
...

库是用 npm 安装的。

对比之下，其他的库应该是都经过 babel 转过码了

'use strict';

Object.defineProperty(exports, ‘__esModule’, { value: true });


function _interopDefault (ex) { return (ex && (typeof ex === ‘object’) && ‘default’ in ex) ? ex[‘default’] : ex; }

这种情况，该怎么处理呢？试过 allowJs 设为 true ，但是好像带来的问题更多了。


Harmonyos Next教程
8 回复

babel 只是一个 js 编译器，处理也得看输出格式是什么，graphviz-react 是一个 esm 规范的模块。

看起来 browserify 在你当前的配置下并不支持 解析 esm 模块，而 react 目前是一个 commonjs 规范的模块

你需要配置 browserify 让其支持 esm 模块，或者换成 webpack/vite



感谢。目前对前端栈里面的概念还有点模糊，我大概了解你指明的问题所在了。🙏

google 搜 browserify transpile node_modules

建议 vite, 别用 browserify 了, 非主流


谢谢，按照你说的，搜到了这个: https://stackoverflow.com/questions/39321384/how-should-i-transform-es6-node-modules-with-browserify-and-babelify

通过组合使用 babelify 的 global 和 only ，可以将 graphviz-react 中的 es6 进行转码。

不过这里还是没太搞清楚，1#提到的 esm 规范和 es6 之间是啥关系，babelify 是用来转换不同版本的 js 代码吧。那么模块规范 esm 和 cjs 之间的转换，也是由它完成的吗？

现在是 2022 吧？还在用 browserify ？？？



感觉还行吧，因为当初找的教程用的是 gulp+browserify ，就用下来了，打包属于低频改动的功能，目前还没看到换的好处。

> 打包属于低频改动的功能

😅 好吧，业务可能太简单了

在Node.js开发中，当你遇到某个库的文件未经Babel处理，导致在使用Browserify打包时出错的问题，通常是因为该库包含了一些Node.js特有的语法或模块系统（如CommonJS），而这些语法或模块系统无法直接在浏览器中运行。以下是一些可能的解决方案：

  1. 配置Babel转换该库： 如果可能，你可以尝试对该库进行Babel转换。首先，确保你已经安装了必要的Babel插件和预设。然后，你可以创建一个.babelrc文件或在你的构建脚本中配置Babel，指定需要转换的文件或目录。

    {
  "presets": ["@babel/preset-env"],
  "ignore": ["/node_modules/"]  // 修改为不忽略特定库，或者完全包含node_modules
}

    注意：通常不建议对整个node_modules进行Babel转换，因为这可能会引入其他问题。你可以尝试只转换出问题的库。

  2. 使用Babel插件处理CommonJS： 如果你确定问题是由于CommonJS模块系统引起的，你可以使用Babel的@babel/plugin-transform-modules-commonjs插件来转换这些模块。

    {
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

  3. 检查Browserify配置： 确保你的Browserify配置正确，特别是transform字段，确保它包含了必要的转换步骤。

如果上述方法仍然无法解决问题，可能需要考虑寻找替代库或手动修改该库的源代码。

回到顶部