为什么browserify build会为react build提供错误？

Question

我有以下代码，我做的一个示例项目。

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

在 package.json 我有以下几行来构建代码

    "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"

当我使用 babel 条目构建时，它构建完美，但是当我使用 browserify 条目进行浏览时，它会失败并出现以下错误？

我无法准确指出我的代码的问题，这是一个非常基本的问题，任何人都可以建议做什么或给出一些解决问题的建议吗？

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)（browserify-global-shim 正在处理 E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\as-player\Player.js）解析文件时：E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\as-player\Player.js 在 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) 在 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) 在 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) 在 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) 在 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) 在 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) 解析时（E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\node_modules\acorn\dist\acorn.js:101:12） 在 module.exports (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\falafel\index.js:22:15) 在流。 (E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\node_modules\browserify-transform-tools\lib\transformTools.js:187:21) 在 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 错误！ Windows_NT 6.1.7601 npm 错误！ argv "C:\Program Files\nodejs\node.exe" "C:\Users\USAMPR2\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "运行" "ranb" npm 错误！节点 v4.3.1 npm 错误！ npm v3.4.1 npm 错误！代码生命周期 npm 错误！ react-wrapper-component@0.0.0 ranb: browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm 错误！退出状态 1 npm 错误！ npm 错误！ react-wrapper-component@0.0.0 ranb 脚本'browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper 失败'。 npm 错误！确保您安装了最新版本的 node.js 和 npm。 npm 错误！如果你这样做了，这很可能是 react-wrapper-component 包的问题， npm 错误！不是 npm 本身。 npm 错误！告诉作者这在您的系统上失败： npm 错误！ browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm 错误！您可以通过以下方式获取他们的信息： npm 错误！ npm 所有者 ls react-wrapper-component npm 错误！上面可能还有额外的日志输出。

npm 错误！请在任何支持请求中包含以下文件： npm 错误！ E:\DevEnv\nginx-1.8.0\nginx-1.8.0\html\test\npm-debug.log

Answer 1

我认为你应该有一个适当的 browserify transform，比如在你的 package.json 的脚本部分中配置的 babelify 或 reactify。否则，browserify 会看到 es6 代码，并抛出错误。

类似

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