为什么browserify构建会给出错误的反应构建? [英] why browserify build gives error for react build?

查看：88
本文介绍了为什么browserify构建会给出错误的反应构建?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码，我完成了一个示例项目.

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

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

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"

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

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

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:意外令牌(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.意外(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.分号处(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)

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"运行""ranb" npm ERR！节点v4.3.1 npm ERR！ npm v3.4.1 npm ERR！代码ELIFECYCLE npm ERR！ react-wrapper-component@0.0.0随机排列:browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm ERR！退出状态1 npm ERR！ npm ERR！在react-wrapper-component@0.0.0随机脚本'browserify./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp..js --transform browserify-global-shim --standalone PlayerWrapper失败'. npm ERR！确保您已安装最新版本的node.js和npm. npm ERR！如果这样做，这很可能是react-wrapper-component软件包的问题， npm ERR！不与npm本身. npm ERR！告诉作者这在您的系统上失败: npm ERR！ browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper npm ERR！您可以通过以下方式获取他们的信息: npm ERR！ npm owner ls react-wrapper-component npm ERR！上面可能还有其他日志记录输出.

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！请在任何支持请求中包括以下文件: npm ERR！ E:\ DevEnv \ nginx-1.8.0 \ nginx-1.8.0 \ html \ test \ npm-debug.log

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

推荐答案

我认为您应该具有正确的浏览器化 transform ，例如在package.json的脚本部分中配置的babelify或reactify .否则，browserify将看到es6代码，并引发错误.

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.

类似

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

这篇关于为什么browserify构建会给出错误的反应构建?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆