2017-05-24 4 views
0

이 자습서를 사용 : http://www.zsoltnagy.eu/step-by-step-environment-setup-of-the-react-developer-no-legacy-2016-standards/npm run build을 입력 한 후 막연한 오류가 발생했습니다. "build": "webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server --hot --inline --colors --progress --content-base src/", "build-prod": "webpack -p && copy src/app/index.html dist/index.html"NPM 실행 빌드 명령의 구문이 올바르지 않음

하지만 확실 해요 : 당신은 package.json는 약간의 변화를 가지고 있으며, 나는 (파일/디렉토리 이름에 공백)이 라인을 함께 할 수있는 그 무언가를 생각 내 앞의 질문을 본 경우

그것을 해결하는 방법.

감사합니다.

package.json 코드

{ 
    "name": "rapp", 
    "version": "1.0.0", 
    "description": "\"\"", 
    "main": "index.js", 
    "repository": { 
     "type": "git", 
     "url": "\"\"" 
    }, 
    "keywords": [ 
     "\"\"" 
    ], 
    "author": "\"BH0\"", 
    "license": "ISC", 
    "dependencies": { 
     "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
     "babel-core": "^6.24.1", 
     "babel-loader": "^7.0.0", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-stage-2": "^6.24.1", 
     "webpack": "^2.6.0", 
     "webpack-dev-server": "^2.4.5" 
    }, 
    "scripts": { 
     "babel": "babel", 
     "webpack": "webpack", 

     "build": "webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server --hot --inline --colors --progress --content-base src/", 
     "build-prod": "webpack -p && copy src/app/index.html dist/index.html" 
    } 
} 

Error message after typing 'npm run build'

webpack.config.js는 :

var path = require('path'); 
 

 
var DIST_PATH = path.resolve(__dirname, 'dist'); 
 
var SOURCE_PATH = path.resolve(__dirname, 'src'); 
 

 
module.exports = { 
 
    entry: SOURCE_PATH + '/app/app.js', 
 
    output: { 
 
     path: DIST_PATH, 
 
     filename: 'app.dist.js', 
 
     publicPath: '/app/' 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /.jsx?$/, 
 
       loader: 'babel-loader', 
 
       exclude: /node_modules/, 
 
       query: { 
 
        presets: [ 
 
         'es2015', 
 
         'react', 
 
         'stage-2' 
 
        ] 
 
       } 
 
      } 
 
     ] 
 
    } 
 
};

가난한 서식 저를 용서하십시오 그러나 그것은 아니었다 작동 (내 노트북의 트랙 패드가 손상됨).

+0

자산을 복사 할 때 실패 했으므로 webpack 구성 파일에서 폴더/파일 경로가 올바른지 확인할 수 있습니까? –

+0

@Niraj webpack.config 파일을 제출했지만 React를 처음 사용하기 때문에 경로가 올바른지 확인할 수 없다고 생각하고 튜토리얼의 코드를 복사했으며 이해할 수 없습니다. 이 질문에 다시 답해주십시오. 또한 형식을 올바르게 다시 지정해 주시기 바랍니다. 죄송합니다. – Programmerion

답변

0

복사 명령이 잘못되었습니다. 이것은 약간의 문제가있는

copy src/app/index.html dist/index.html 

, 나는 그냥 파일 구조 & 경로가 올바른지 확인 Windows 사용자 그렇게하지 못할 시험 아닙니다. 귀하의 스크린 샷을 보면 webpack 명령이 성공적이었으며 다음 명령은 copy이었습니다. 실패했습니다.

0

모든 파일 경로를 \\으로 변경해야합니다. 귀하의 코드를 테스트했는데, 정상적으로 작동합니다.

// webpack.config.js 
var webpack = require("webpack"), 
path = require ("path"); 

var DIST_DIR = path.resolve(__dirname, "dist"), 
    SRC_DIR = path.resolve (__dirname, "src"); 

var config = { 

    entry: SRC_DIR + "\\app\\index.js", 

    output: { 

     path: DIST_DIR + "\\app", 
     filename: "bundle.js", 
     publicPath: "\\app\\" 

    }, 

    module: { 

     loaders: [{ 

      test: /\.js?/, 
      include: SRC_DIR, 
      loader: 'babel-loader', 
      query: { presets: [ "env", "react", "stage-2" ] } 

     }] 

    } 

} 

module.exports = config; 

// package.json 
"scripts": { 

    "start": "npm run build", 
    "build": "webpack -d && copy src\\index.html dist\\index.html && webpack-dev-server --content-base src\\ --inline --hot", 
    "build:prod": "webpack -p && copy src\\index.html dist\\index.html" 

} 
관련 문제