Question

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

PlayerWrapper.js

＆＃13;

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

＆＃13;

Player.jS

＆＃13;

import React from 'react'

class Player extends React.Component {

    render(){
        return(
            <div><h1>How are you from Player</h1></div>
        )
    }


}

export default Player

＆＃13;

在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：意外的令牌（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） 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）在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 \测试\ node_modules \ browserify变换工具\ 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 ERR！ Windows_NT 6.1.7601 错误的ERR！ argv＆＃34; C：\ Program Files \ nodejs \ node.exe＆＃34; ＆＃34; C：\用户\ USAMPR2 \应用程序数据\漫游\ NPM \ node_modules \ NPM \ BIN \ NPM-cli.js＆＃34; ＆＃34;运行＆＃34; ＆＃34; ranb＆＃34; 错误的ERR！节点v4.3.1 错误的ERR！ npm v3.4.1 错误的ERR！代码ELIFECYCLE 错误的ERR！ react-wrapper-component@0.0.0 ranb：browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper 错误的ERR！退出状态1 错误的ERR！错误的ERR！在react-wrapper-component@0.0.0 runb脚本失败＆＃39; browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim - -standalone PlayerWrapper＆＃39;。错误的ERR！确保安装了最新版本的node.js和npm。错误的ERR！如果这样做，这很可能是react-wrapper-component包的一个问题，错误的ERR！不是与npm本身。错误的ERR！告诉作者你的系统失败了：错误的ERR！ browserify ./as-player/PlayerWrapperwp.js -o ./as-player/PlayerWrapperwp--.js --transform browserify-global-shim --standalone PlayerWrapper 错误的ERR！您可以通过以下方式获取信息：错误的ERR！ npm owner ls react-wrapper-component 错误的ERR！上面可能有额外的日志记录输出。

npm ERR！请在任何支持请求中包含以下文件：错误的ERR！ E：\ devenv的\ nginx的-1.8.0 \ nginx的-1.8.0 \ HTML \测试\ NPM-的debug.log

Answer 1

我认为您应该有一个正确的浏览器转换，例如在package.json的脚本部分中配置的babelify或reactify。否则，browserify将看到es6代码，并抛出错误。

像

这样的东西

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

为什么browserify build会给反应构建带来错误？

1 个答案: