2017-12-06 10 views
1

Webpack + Babel을 사용하여 IE> = 11에서 실행중인 ES2015 기능이있는 React App을 얻으려고합니다. 설정은 inferno-compat 레이어를 사용하는 맞춤형이므로 여기서 create-react-app을 사용하지 마십시오.SCRIPT1002 : React + Babel + Webpack이있는 IE11의 구문 오류

그러나 - 내 .babelrc 및 웹팩 설정에 대한 최신 babel-polyfillbabel-preset-env 관행을 적용에도 불구하고, 나는 여전히 SCRIPT1002 수 : IE11과 응용 프로그램에 액세스하려고 할 때 내 bundle.js 내에서 구문 오류합니다. 내가 IE들은 콘솔에서 구문 오류 참조를 수행 할 때 그 (특히 화살표 기능) 충돌 것 bundle.js

,이 생성 된 내부의 일부입니다

function add(x, y) { 
    if (y === undefined) { 
    return yHolder => add(x, yHolder); 
    } 

    return x + y; 
} 

이가 내 관련 종속되어 내 package.json는 :

"dependencies": { 
    "inferno-redux": "^3.10.1", 
    "react": "^15.6.0", 
    "react-dom": "^15.6.0", 
    "react-ga": "^2.2.0", 
    "react-swipeable": "^4.1.0", 
    "redux": "^3.7.2", 
    "redux-saga": "^0.16.0", 
    "regenerator-runtime": "^0.11.0" 
}, 
"devDependencies": { 
    //... stuff 

    "babel-cli": "^6.26.0", 
    "babel-core": "^6.25.0", 
    "babel-eslint": "^7.2.3", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-inferno": "^3.2.0", 
    "babel-plugin-module-resolver": "^2.7.1", 
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", 
    "babel-plugin-transform-es2015-spread": "^6.22.0", 
    "babel-plugin-transform-regenerator": "^6.26.0", 
    "babel-plugin-transform-runtime": "^6.23.0", 
    "babel-polyfill": "^6.26.0", 
    "babel-preset-env": "^1.6.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-flow": "^6.23.0", 
    "babel-preset-react": "^6.24.1", 

    //... some more stuff 

    "webpack": "^3.8.1", 
    "webpack-bundle-analyzer": "^2.9.1", 
    "webpack-dev-middleware": "^1.12.2", 
    "webpack-dev-server": "^2.9.5", 
    "webpack-manifest-plugin": "^1.3.2", 
    "webpack-merge": "^4.1.1", 
} 

이 내 .babelrc입니다 :

{ 
    "presets": 
    [ 
    "react", 
    "flow", 
    "es2015", 
    [ 
     "env", { 
     "modules": "commonjs", 
     "targets": { 
      "browsers": ["last 2 versions", "ie >= 11"] 
     } 
     } 
    ] 
    ] 
} 

나는 내 babel-polyfill에는 내 여기 webpack.base.config.js :

// ... stuff 
entry: { 
    index: ['babel-polyfill', './index.js'], 
}, 
// ... more stuff 

는 IE11에서 실행 얻을 수없는 무엇을 어떤 아이디어가?

답변

3

문제점을 발견했습니다. 모듈 rambdax을 내 devDependencies 중 하나로 사용하고 있습니다. 여기에는 ES6 구문으로 작성된 소스 코드 (ES5로 변환되지 않음)가 포함되어 있습니다. - 더 구체적으로 화살표 bundle-=>은 내 bundle.js에 직접 포함되어 있습니다. 물론 IE11은 화살표 기능이나 다른 ES6 구문을 실행할 수 없습니다.

불행하게도 bundle.js를 컴파일 할 때 Babel이나 Webpack (UglifyJS Plugin)은 가져온 node_modules의 소스를 만납니다. 즉, ES6으로 가져온 모듈 소스 코드는 웹 팩 bundle.js에서 ES6으로 유지됩니다.

이 주제에 대한 자세한 내용은 https://github.com/facebookincubator/create-react-app/issues/1125을 참조하십시오.

나는 또한 'rambdax '저장소 내에이 문제와 관련된 문제를 이미 제기했습니다. 거기에 대해 자세히 알아볼 수 있습니다 : https://github.com/selfrefactor/rambdax/issues/4