why browserify build gives error for react build?

问题

i have the following codes , a sample project i done.

PlayerWrapper.js

import React from 'react'
import Player from './Player'

class PlayerWrapper extends React.Component {

    render() {
        return (
            <div>
                <h3>before player</h3>
                <Player />
                <h3>after player</h3>
            </div>
        )
    }


}

export default PlayerWrapper

Player.jS

import React from 'react'

class Player extends React.Component {

    render(){
        return(
            <div><h1>How are you from Player</h1></div>
        )
    }


}

export default Player

in the package.json i have the following lines to build the code

    "ran": "babel ./as-player/PlayerWrapper.js -o ./as-player/PlayerWrapperwp.js --source-maps --presets react,es2015",
"ranb": "browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper"

when i build with the babel entry it builds perfectly , but when i use the browserify entry to browserify it get failed giving the following error?

i can't exactly pinpoint an issue with my code, it is a very basic one, can any one suggest what to do or give some pointers to resolve the issue?

react-wrapper-component@0.0.0 ranb E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper

SyntaxError: Unexpected token (1:7) (while browserify-global-shim was processing E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\as-player\Player.js) while parsing file: E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\as-player\Player.js at Parser.pp.raise (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:1745:13) at Parser.pp.unexpected (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:2264:8) at Parser.pp.semicolon (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:2243:59) at Parser.pp.parseExpressionStatement (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:2677:8) at Parser.pp.parseStatement (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:2462:160) at Parser.pp.parseTopLevel (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:2379:21) at parse (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:101:12) at module.exports (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\index.js:22:15) at Stream. (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\browserify-transform-tools\lib\transformTools.js:187:21) at Stream.end (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\browserify-transform-tools\lib\transformTools.js:108:30)

npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\USAMPR2\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "ranb" npm ERR! node v4.3.1 npm ERR! npm v3.4.1 npm ERR! code ELIFECYCLE npm ERR! react-wrapper-component@0.0.0 ranb: browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-wrapper-component@0.0.0 ranb script 'browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the react-wrapper-component package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm ERR! You can get their info via: npm ERR! npm owner ls react-wrapper-component npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\npm-debug.log

回答1:

I think you should have a proper browserify transform, like babelify or reactify configured in your package.json's scripts section. Otherwise, browserify will see es6 code, and throw an error.

Something like

browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js -t reactify --transform browserify-global-shim --standalone PlayerWrapper

来源：https://stackoverflow.com/questions/37092308/why-browserify-build-gives-error-for-react-build

标签

reactjs

browserify

babel