1. 程式人生 > >前端構建工具裏babel-polyfill的使用問題

前端構建工具裏babel-polyfill的使用問題

cor html con pre airbnb 對象 3.1 hot 正常

看了很多react工程的package.json文件,裏面都沒有使用babel-polyfill,那對ES6的新API是如何做到被IE9這樣的瀏覽器識別的呢,難道在webpack打包的時候通過別的方式加了API?先自己試一下。

這是package.json文件,

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot"
  },
  
"keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-react-hmre": "^1.1.1", "eslint": "^2.13.0", "eslint-config-airbnb": "^9.0.1",
"eslint-loader": "^1.3.0", "eslint-plugin-import": "^1.8.1", "eslint-plugin-jsx-a11y": "^1.5.3", "eslint-plugin-react": "^5.2.2", "html-webpack-plugin": "^2.21.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react": "^15.1.0", "react-dom": "^15.1.0" } }

這是react文件

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
const b = Array.of(1, 2, 4);
console.log(b);

function App() {
  return (
    <div className="container">
      <h1>Hello React!</h1>
    </div>
  );
}

const app = document.createElement(‘div‘);
document.body.appendChild(app);
ReactDOM.render(<App />, app);

編譯後chrome能正常輸出數組b,而IE9顯示錯誤:SCRIPT438: 對象不支持“of”屬性或方法

那該如何使IE9獲得ES6的API呢?先看一篇文章ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍(下)

前端構建工具裏babel-polyfill的使用問題