某个 package 的库文件没有经过 babel 处理，导致在 browserify 时报错

[sillydaddy]

加入了 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 ，但是好像带来的问题更多了。

[lisongeee]

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

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

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

[sillydaddy]

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

[zhuweiyou]

google 搜 browserify transpile node_modules

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

[sillydaddy]

@zhuweiyou
谢谢，按照你说的，搜到了这个: 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 之间的转换，也是由它完成的吗？

[JounQin]

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

[sillydaddy]

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

[JounQin]

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

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