为什么browserify构建会给出错误的反应构建? [英] 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
在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屋!