Question

我正在尝试将此npm module与browserify一起使用。

当我运行$ browserify build/widget.js -o bundle.js时，我收到以下错误：

Error: Parsing file /Users/nir/browsewidget/node_modules/react-spin/src/main.js: Unexpected token (29:6)
    at Deps.parseDeps (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:436:28)
    at fromSource (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:375:44)
    at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:369:17
    at ConcatStream.<anonymous> (/usr/local/lib/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
    at ConcatStream.emit (events.js:129:20)
    at finishMaybe (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
    at endWritable (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
    at ConcatStream.Writable.end (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
    at DuplexWrapper.onend (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
    at DuplexWrapper.g (events.js:199:16)

注意：文件build/widget.js不是JSX，它是使用JSX compiler构建的。

为什么我会收到意外的令牌？

根据snozza的回答编辑

我已安装npm install reactify --save。

然后我跑了% browserify -t reactify build/widget.js 这给了-bash: fg: %: no such job

然后我尝试browserify -t reactify build/widget.js ，这给了：

Error: Parsing file /Users/nir/browsewidget/node_modules/react-spin/src/main.js: Unexpected token (29:6)
    at Deps.parseDeps (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:436:28)
    at fromSource (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:375:44)
    at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:369:17
    at ConcatStream.<anonymous> (/usr/local/lib/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
    at ConcatStream.emit (events.js:129:20)
    at finishMaybe (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
    at endWritable (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
    at ConcatStream.Writable.end (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
    at DuplexWrapper.onend (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
    at DuplexWrapper.g (events.js:199:16)

以下是我build/widget.js所要求的片段：

    var React =require('react');
    var Spinner = require('react-spin')

    var Loading = React.createClass({displayName: "Loading",
        render: function() {
            var spinCfg ={
              lines: 5 // The number of lines to draw
              , length: 5 // The length of each line
              , width: 42 // The line thickness
              , radius: 21 // The radius of the inner circle
              , scale: 1 // Scales overall size of the spinner
              , corners: 1 // Corner roundness (0..1)
              , color: '#000' // #rgb or #rrggbb or array of colors
              , opacity: 0.25 // Opacity of the lines
              , rotate: 0 // The rotation offset
              , direction: 1 // 1: clockwise, -1: counterclockwise
              , speed: 1 // Rounds per second
              , trail: 60 // Afterglow percentage
              , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
              , zIndex: 2e9 // The z-index (defaults to 2000000000)
              , className: 'spinner' // The CSS class to assign to the spinner
              , top: '50%' // Top position relative to parent
              , left: '50%' // Left position relative to parent
              , shadow: false // Whether to render a shadow
              , hwaccel: false // Whether to use hardware acceleration
              , position: 'absolute' // Element positioning
            };

            return React.createElement(Spinner, {config: spinCfg})
        }
    })

//...etc...

有什么想法吗？

Answer 1

查看react-spin https://github.com/thomasboyt/react-spin/blob/master/src/main.js的main.js文件，它确实包含JSX语法，即：

SELECT product_name, concat(decade, '-', decade + 9) AS year, count(*) AS count
FROM (SELECT p.product_name, floor(year(birthday) / 10) * 10 as decade
      FROM (SELECT product_name, count(*) as count_product_name
            FROM ps_order_detail
            WHERE id_shop = 1
            group by product_name
            order by count_product_name DESC
            LIMIT 5) AS p
      JOIN ps_order_detail AS od ON od.product_name = p.product_name
      JOIN ps_orders AS o on o.id_order = od.id_order
      JOIN ps_customer AS c ON c.id_customer = o.id_customer
      WHERE od.id_shop = 1) AS x
GROUP BY product_name, decade

当browserify解析该文件时，这会导致解析错误。您可以将https://www.npmjs.com/package/reactify等变换器与browserify结合使用，将JSX转换为vanilla JS。

编辑：Reactify示例

由于它是一个必需的node_module，也需要进行转换，因此需要将browserify / reactify转换选项添加到return ( <span ref="container" /> );的package.json中。转到react-spin文件夹并将其复制到react-spin下面的包json：

"main"

然后再次尝试运行browserify命令

Browserify错误：解析文件，意外的令牌

1 个答案: