babel-polyfill使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了babel-polyfill使用相关的知识,希望对你有一定的参考价值。
参考技术A 解决ie9和一些低版本的高级浏览器对es6新语法并不支持问题npm install --save-dev babel-polyfill
babel-polyfill用正确的姿势安装之后,引用方式有三种:
1.require("babel-polyfill");
2.import "babel-polyfill";
3.webpack.config.js
module.exports =
entry: ["babel-polyfill", "./app/js"]
;
前端构建工具里babel-polyfill的使用问题
看了很多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使用的主要内容,如果未能解决你的问题,请参考以下文章