V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  Node.js

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

  •  
  •   sillydaddy · 4 天前 · 700 次点击

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

    7 条回复    2022-08-06 17:43:50 +08:00
    lisongeee
        1
    lisongeee  
       4 天前   ❤️ 1
    babel 只是一个 js 编译器,处理也得看输出格式是什么,graphviz-react 是一个 esm 规范的模块。

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

    你需要配置 browserify 让其支持 esm 模块,或者换成 webpack/vite
    sillydaddy
        2
    sillydaddy  
    OP
       4 天前
    @lisongeee
    感谢。目前对前端栈里面的概念还有点模糊,我大概了解你指明的问题所在了。🙏
    zhuweiyou
        3
    zhuweiyou  
       4 天前   ❤️ 1
    google 搜 browserify transpile node_modules

    建议 vite, 别用 browserify 了, 非主流
    sillydaddy
        4
    sillydaddy  
    OP
       4 天前
    @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
        5
    JounQin  
       4 天前 via iPhone
    现在是 2022 吧?还在用 browserify ???
    sillydaddy
        6
    sillydaddy  
    OP
       4 天前
    @JounQin
    @zhuweiyou
    感觉还行吧,因为当初找的教程用的是 gulp+browserify ,就用下来了,打包属于低频改动的功能,目前还没看到换的好处。
    JounQin
        7
    JounQin  
       4 天前 via iPhone
    > 打包属于低频改动的功能

    😅 好吧,业务可能太简单了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3145 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:38 · PVG 18:38 · LAX 03:38 · JFK 06:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.