Merge pull request #15 from xcatliu/fixture/reinitialize-readme

Remove es3ify
xcatliu · Dec 29, 2015 · d90dabf · d90dabf
2 parents 96b877a + a2a5790
commit d90dabf
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -1,84 +1,61 @@
-使你的 React 应用兼容 IE8
-===
+[English README](#make-your-react-app-work-in-ie8)
 
-来自 [NET Market Share](http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpsp=196&qpnp=1&qptimeframe=M) 的数据表明，2015 年五月，全球浏览器份额中，IE6 占比仅有 0.85%，IE7 仅有 0.38%，但是 IE8 还有 14.79% 的份额，所以兼容到 IE8 还是有必要的。
+# 使你的 React 应用兼容 IE8
 
-幸运的是 React 对 IE8 是兼容的<sup>[[1]](https://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills)</sup>。但是需要做一些额外的配置：
+> 一行代码搞定 IE8 的兼容性问题
 
-## es5-shim.js
+## 使用方法
 
-`es5-shim.js` 提供了一些 EcmaScript 5 语法的支持，其中这些是被 React 使用了的：
+### CommonJS
 
-```
-Array.isArray
-Array.prototype.every
-Array.prototype.forEach
-Array.prototype.indexOf
-Array.prototype.map
-Date.now
-Function.prototype.bind
-Object.keys
-String.prototype.split
-String.prototype.trim
-```
+若您使用 CommonJS 风格，引入 `react-ie8` 很简单，直接在**入口文件最前面**加上以下代码即可。
 
-当然，一旦你引用了 `es5-shim.js`，那么[这些方法](https://github.com/es-shims/es5-shim#shims)都可以随意使用了。
+```js
+require('react-ie8')(options);
+```
 
-`es5-shim.js` 支持 AMD，CommonJS 或者直接以 `script` 标签的形式插入到 html 中。
+## 配置
 
-使用 `bower install es5-shim` 或者 `npm install es5-shim` 之后即可引用，参考这个例子。
+支持的配置：
 
-## es5-sham.js
+### es5-shim
 
-`es5-sham.js` 提供了其他的一些 ES5 语法的支持，其中这些是被 React 使用了的：
+### es5-sham
 
-```
-Object.create
-Object.freeze
-```
+### console-polyfill
 
-尽管 `es5-sham.js` 实现了所有其他的 ES5 语法，但是有很多实现仅仅只是为了让它在老浏览器中不会报错，也就是说，调用[这些方法](https://github.com/es-shims/es5-shim#may-fail)，会默默的失败。
+## 参考
 
-然而，一旦你引用了 `es5-sham.js`，那么[这些方法](https://github.com/es-shims/es5-shim#shams)是可以随意使用的。
+- [React 官方对 IE8 的支持][React official support for IE8]
 
-`es5-sham.js` 的引用方式同 `es5-shim.js`。
+<a id="make-your-react-app-work-in-ie8"></a>
 
-`es5-sham.js` 需要在 `es5-shim.js` 之后引用，而这两者都得在调用 ES5 语法之前引用。
+# Make your React app work in IE8
 
-## console-polyfill
+> Solve compatibility problem with one liner code
 
-React 中使用了 `console.*`，故需要 `console-polyfill` 来使旧浏览器不报错。
+## Usage
 
-`console-polyfill` 提供了 `component`, `bower` 或者 `npm` 的方式引入。
+### CommonJS
 
-## HTML5 shiv (optional)
+If you are using CommonJS, It's quite easy to import react-ie8, just insert the code below **to the beginning of your entry file**.
 
-如果你用到了一些 HTML5 的标签，比如 `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>` 等，那么需要引入 HTML5 shiv。
-
-由于需要在文档解析前引入，故最好将它以 `script` 标签的形式插入到 `head` 中，注意最好添加对 IE 的识别，只在小于 IE9 的浏览器中引用即可：
-
-```html
-<!--[if lt IE 9]>
-  <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
-<![endif]-->
+```js
+require('react-ie8')(options);
 ```
 
-HTML5 shiv 支持 bower 的方式安装。
-
-## Respond.js (optional)
-
-如果你用到了 `min/max-width CSS3 Media Queries`，那么需要引用 `Respond.js`。
+## Options
 
-由于 Bootstrap 使用了这个，所以依赖于 Bootstrap 的项目需要引用 `Respond.js`。
+Supported options:
 
-`bower` 安装后，直接在 `head` 中插入即可。
+### es5-shim
 
-## Trouble Shooting
+### es5-sham
 
-### Respond.js 不支持跨域
+### console-polyfill
 
-由于 Respond.js 使用了 Ajax 去请求你的 css 文件，所以需要针对跨域的 Respond.js 做一些额外的适配。
+## Reference
 
-### Promise undefined
+- [React official support for IE8][]
 
-IE8 下没有 Promise，建议使用 [es6-promise](https://github.com/jakearchibald/es6-promise)。
+[React official support for IE8]: https://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills
diff --git a/es3ify-webpack-plugin/index.js b/es3ify-webpack-plugin/index.js
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,13 @@
+# React IE8 examples
+
+A series of examples which are using `react-ie8` to make app work in IE8.
+
+## Getting start
+
+```shell
+$ cd <an-example-fold>
+$ npm install
+$ npm start
+```
+
+Open your browser at http://localhost:8000
diff --git a/examples/hello-world/index.html b/examples/hello-world/index.html
@@ -1,7 +1,10 @@
-<!doctype HTML>
+<!doctype html>
 <html>
   <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <title>Hello World</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <div id="app"></div>

diff --git a/examples/hello-world/webpack.config.js b/examples/hello-world/webpack.config.js
@@ -1,5 +1,3 @@
-const Es3ifyWebpackPlugin = require('../../es3ify-webpack-plugin');
-
 module.exports = {
   debug: true,
   devtool: 'source-map',
@@ -12,7 +10,4 @@ module.exports = {
       },
     ],
   },
-  plugins: [
-    new Es3ifyWebpackPlugin(),
-  ],
 };
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
     "babelify": "^6.1.2",
-    "es3ify": "^0.1.4",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^2.1.1",
     "eslint-plugin-react": "^3.12.0",