간단한 react.js 설정에서 webpack으로 JSX을 번역하기 위해 babel을 호출하는 데 문제가 발생했습니다.

Question

이전에 단순한 웹 페이지에서 CDN에서 가져 오기, JSX 사용 안 함, 변형없이 ES6 사용 등 일부 구성 요소에 대해 react.js를 약간 사용했습니다. 이제는 웹팩과 바벨 (babel)을 사용하여 반응 주위의 더 큰 도구 세트를 알아 내려고 노력하고 있습니다. 노드와 npm은 나에게 새로운 것입니다.

저는 index.js에서 JSX을 번역하기 위해 babel이 호출되지 않는 이유를 알아 냈습니다. 결과물 인 bundle.js에서 호출 된 console.log 메시지를 작성하려고하는데 그냥 webpack으로 작업하는 것이있었습니다. 그리고 반응이 좋았고, babel, JSX 또는 다른 종속성을 추가하기 전에 제대로 작동했습니다. babel 구성 사전 설정을 webpack.config.js 로더 대신 프로젝트 루트의 babelrc.js 파일에 넣으려고했으나 아무런 차이가없는 것으로 보입니다. 나는 여러 가지 베어 본 자습서를 살펴 보았지만 모두 약간 다른 것처럼 보이기 때문에 필요한 devDependencies (즉, 바벨 클라이 (babel-cli) 또는 바벨 (babel) 또는 바벨 로더 (babel-loader) 등) 및 일부 버전 비 호환성 또는 뭔가 끝난 경우 잘 모르겠습니다.

내가 pacakges 취득 할 때 다음 NPM 경고를받을 수 있나요 :

NPM을 엔진 webpack@2.7.0 경고가 : 원 : { "노드": "> = 4.3.0 < 5.0.0 ||

= 5.10 "} 현재 : {"node ":"5.4.1 ","npm ":"3.3.4 "}) npm WARN deprecated babel-preset-es2015@6.14.0 : 바벨 : babel-preset-env를 사용하는 것이 좋습니다. 업데이트하려면 babeljs.io/env를 읽어보십시오! 지원되지 않는 NPM 엔진 enhanced-resolve@3.4.1 경고 :
NPM은 선택 종속성을 설치할 수 없습니다 설치 WARN 원 : { "노드": "> = 4.3.0 < 5.0.0 || = 5.10"} (현재 : { "node": "5.4.1", "npm": "3.3.4"}) npm WARN engine loader-runner@2.3.0 : wanted : { "node": "> = 4.3.0 < 5.0.0 ||> = 5.10 "} 는 (현재 : {"노드 ":"5.4.1 ","NPM ":"3.3.4 "})

나는에 시도하지 않은 내 개발 환경 (Windows 10/VS2017)과의 호환성 문제가 발생할 수 있으므로 내 노드 버전을 변경하십시오.

이

이 ./index.js 모듈 구문 분석에 오류가 실패 : C

고궁 박물원 로그 나 그 바벨 변환을하도록 부름 받고되지 않은 생각하게 다음을 포함하는 오류 메시지가 포함 : \ Users \ Paul \ source \ WebSites \ MinimalReact \ index.js 예기치 않은 토큰 (8:15)이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다. | 내보내기 클래스 MySpan extends React.Component {| render() {|
안녕하세요! | } | };

환경 : IDE : 비주얼 스튜디오 2017 CE, 노드 v5.4.1, NPM의 v3.3.4,

package.json :

{ 
    "version": "0.0.1", 
    "name": "test_react", 
    "private": true, 
    "devDependencies": { 
    "webpack": "^2.5.1", 
    "babel-loader": "7.1.2", 
    "babel-cli": "6.14.0", 
    "babel-preset-react": "6.11.1", 
    "babel-preset-es2015": "6.14.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    }, 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    }, 
    "scripts": { "build": "webpack --config webpack.config.js" } 
} 

webpack.config.JS :

"use strict"; 

module.exports = { 
    entry: "./index.js", 
    output: { 
     filename: "./bundle.js", 
     libraryTarget: "var", 
     library: "MyModule" 
    }, 
    module: { 
     loaders: [ 
      { 
       test:"/\.js$/", 
       exclude: "/node_modules/", 
       loader: "babel-loader", 
       query: { 
        presets:["es2015", "react"] 
       } 
      } 
     ] 
    } 
}; 

하는 index.js :

"use strict"; 

import React from "react"; 
import ReactDOM from "react-dom"; 

class MySpan extends React.Component { 
    render() { 
     return <span>Hello!</span>; 
    } 
}; 


function showContent() { 
    var div = document.getElementById("display"); 
    ReactDOM.render(<MySpan/>, div); 
}; 

export { MySpan, showContent}; 

Answer 1

아,이 문제를 깨달았다. test 및 exclude 값은 문자열이 아닌 정규식이어야합니다. 문제를 해결하려면 외부 따옴표를 제거하십시오.

module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/ 
     loader: 'babel-loader', 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    } 
    ] 
}