Ошибка браузера: анализ, Неожиданный токен

Question

Я пытаюсь использовать этот npm module с обозревателем.

Когда я бегу $ 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

Просматривая main.js файл среагировать-спина https://github.com/thomasboyt/react-spin/blob/master/src/main.js, он действительно содержит синтаксис JSX, а именно:

return (
     <span ref="container" /> 
); 

Это приводит к ошибке синтаксического анализа, когда browserify является разбор этого файла. Вы можете использовать трансформатор, такой как https://www.npmjs.com/package/reactify, в сочетании с браузером, чтобы преобразовать JSX в vanilla JS.

EDIT: Reactify пример

как это требуется node_module, который также должен быть преобразован, вам нужно будет добавить browserify/reactify преобразовать параметр в package.json из react-spin. Перейдите в папку react-spin и скопировать его в пакет JSON, под "main":

"browserify": {"transform": ["reactify"]}, 

Затем попробуйте запустить browserify команду еще раз