browserify는 babel-preset-react, babel-preset-es2015 및 babel-preset-stage-3을 사용하지만 jsx를 구문 분석하지 못합니다.

Question

전체 프로세스를 자동화하기 위해 사용하고 있습니다. 이것은 내 구성 모습입니다 같은 : 다음 오류와 함께 수입하는 반응 구성 요소 중 하나 구문 분석을 시도 할 때 실패

browserify: { 
     dist: { 
      files: { 
       '<%= dirs.dest %>/index.js': [ 
        '<%= dirs.src %>/index.js' 
       ] 
      }, 
      options: { 
       transform: [ 
        ['babelify', { presets: ['es2015', 'stage-3', 'react'] }] 
       ] 
      }, 
     } 
    }, 

: 나도 같은 파일을 사용하려고했습니다

>>    <div> 
>>   ^
>> ParseError: Unexpected token 
Warning: Error running grunt-browserify. Use --force to continue. 

Aborted due to warnings. 

을 그 브라우저에서 babel-standalone을 사용하여 오류가 발생하고 정상적으로 작동합니다. 대부분의 링크가

Answer 1

과 다른 뭔가를해야합니다, browserify 프로젝트 외부에있는 파일을 포함 transpile하지 않습니다. 문제를 일으킨 구성 요소가 node_modules에서 포함 되었기 때문에 브라우저 소스가 이 아니고이 아니라는 것을 브라우저가 알게하고 파일이 포함될 때 그 파일을 잘라야한다는 것을 확인하기 위해 해당 파일의 package.json을 구성해야했습니다.

나는 나의 node_modules 구성 요소의 package.json이를 포함하여 그렇게 할 수 있었다 :

"browserify": { "transform": [ "babelify" ] } 

나는이를 추가하고 구성 요소가 모듈에서 수출되고 있다는 보장, 예상대로 모든 일을 시작하면.

참조 : https://github.com/babel/babel/issues/1625#issuecomment-105334250

Answer 2

해보십시오 바벨 프리셋-ENV (그리고 내가 가진 다른 프로젝트와 함께 작동)을 수정해야 바벨 프리셋이-반응하여 말대로

나는이 문제를 해결하는 방법으로 난처한 상황에 빠진거야 이것은 대부분의 경우를 다루어야합니다. 가 개인적으로 나는 같은 것을 사용하는 경향이 작동하지 않는 경우 "presets": ["env", "react", "stage-3"]

을, 그것은 당신의 설정 기본적으로