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

2022-08-05 20:09:13 +08:00
 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 ,但是好像带来的问题更多了。

3637 次点击
所在节点    Node.js
7 条回复
lisongeee
2022-08-05 20:42:29 +08:00
babel 只是一个 js 编译器,处理也得看输出格式是什么,graphviz-react 是一个 esm 规范的模块。

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

你需要配置 browserify 让其支持 esm 模块,或者换成 webpack/vite
sillydaddy
2022-08-05 21:12:06 +08:00
@lisongeee
感谢。目前对前端栈里面的概念还有点模糊,我大概了解你指明的问题所在了。🙏
zhuweiyou
2022-08-05 22:01:19 +08:00
google 搜 browserify transpile node_modules

建议 vite, 别用 browserify 了, 非主流
sillydaddy
2022-08-06 13:34:42 +08:00
@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-08-06 15:13:39 +08:00
现在是 2022 吧?还在用 browserify ???
sillydaddy
2022-08-06 17:25:09 +08:00
@JounQin
@zhuweiyou
感觉还行吧,因为当初找的教程用的是 gulp+browserify ,就用下来了,打包属于低频改动的功能,目前还没看到换的好处。
JounQin
2022-08-06 17:43:50 +08:00
> 打包属于低频改动的功能

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/870966

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX