加入了 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 ,但是好像带来的问题更多了。
1
lisongeee 2022-08-05 20:42:29 +08:00 1
babel 只是一个 js 编译器,处理也得看输出格式是什么,graphviz-react 是一个 esm 规范的模块。
看起来 browserify 在你当前的配置下并不支持 解析 esm 模块,而 react 目前是一个 commonjs 规范的模块 你需要配置 browserify 让其支持 esm 模块,或者换成 webpack/vite |
2
sillydaddy OP @lisongeee
感谢。目前对前端栈里面的概念还有点模糊,我大概了解你指明的问题所在了。🙏 |
3
zhuweiyou 2022-08-05 22:01:19 +08:00 1
google 搜 browserify transpile node_modules
建议 vite, 别用 browserify 了, 非主流 |
4
sillydaddy OP @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 之间的转换,也是由它完成的吗? |
5
JounQin 2022-08-06 15:13:39 +08:00 via iPhone
现在是 2022 吧?还在用 browserify ???
|
6
sillydaddy OP |
7
JounQin 2022-08-06 17:43:50 +08:00 via iPhone
> 打包属于低频改动的功能
😅 好吧,业务可能太简单了 |