如何讓React anujs 跑在IE8上

本文不會慷慨激昂地控訴ie8怎麼怎麼的，因為沒有意義，總有苦逼的人。群裡也經常問到如此讓anujs跑到低版本瀏覽器下，現在統一答覆一下如何讓anujs代替react，跑到ie8中。

anujs倉庫：

rubylouvre/anu-ie8-example

我的例子還是很時髦的，使用時下最新的webpack4。花了一天時間，還寫了兩個新庫（object-create-ie8,object-defineproperty-ie8）,搞定各個難關。網上也提到其他庫，如react-ie8，但那是用react0.14與webpack1, babel3，都太古老了。我的anujs是支援react16的特徵，搭配最新的webpack與babel！當然了，ui庫要自己寫了！

首先是 webpack4的配置

const path = require('path');
const es3ifyplugin = require('es3ify-webpack-plugin');
module.exports = ,
output: ,
resolve: 
},devtool: 'source-map',//不使用eval方便除錯
module: ]]
}}},,
}]}]
},mode: 'development',
plugins: [new es3ifyplugin()]
};

主要技巧是使用了 babel-preset-es2015-loose, babel-preset-react 這兩個轉換集, 還有一些外掛程式。大家可以相應加多點外掛程式。

在安裝時，光是 babel-preset-es2015-loose是不行的，它還會提示你安裝babel-preset-es2015。

我們不要用babel-preset-env。因為 babel-preset-es2015-loose最大的用處是轉換es6 class，它會生成三個輔助函式。

function _classcallcheck(instance, constructor) 
function _possibleconstructorreturn(self, call) 
function _inherits(subclass, superclass)

這三個方法究竟如何實現類機制，可以參看這篇文章

麻煩出在_possibleconstructorreturn與_inherits。如果不用 babel-preset-es2015-loose，那麼生成的_possibleconstructorreturn方法會有object.defineproperty，這需要做許多hack也不能保證按預期執行。用了 babel-preset-es2015-loose後，生成的版本則直接obj.a = b，沒有高階語法，完美執行。另乙個函式_inherits用到的object.create，ie9才支援的新方法，這時需要用到我的迷你庫object-create-ie8了。解決了類定義就是成功的一半。

在webpack4中，會建立乙個起點函式，裡面定義一些共用方法，都是以o, d, r這些單字母命名的，它們裡面用到object.defineproperty, 這時需要用到我的迷你庫object-defineproperty-ie8了。

需要說明一下的是，我們無法判定業務線的同學用了多少es6高階特性。但我不建議使es5-sham, 但它會加許多其他沒用的補丁。由於是sham，所以這些補丁都是有缺憾的，會引發各種奇怪問題會幫倒忙。

同樣的理由是不建議使用babel-polyfill，這個庫體積也很大，實現也很粗糙。

可以乙個個試，通常不會用太多高階的東西，多數是物件解構，預設引數等語法糖。群裡的朋友推薦用transform-runtime，可以做到用到什麼引入什麼。具體自己實踐一下。

為了方便除錯，我們還指定了devtool為'source-map'。

此外，還要對關鍵字 default, for, delete進行處理，否則會報錯：script1028: 缺少識別符號、字串或數字。於是我們用到了 es3ifyplugin。所有業務**與第三庫都要經過它的處理。

我們再看業務**index.js

import 'es5-shim'; //ie8 ^4.5.10
import 'object-create-ie8';//ie8, 我寫的庫，這樣就不用加上es5-sham
import 'object-defineproperty-ie8';//ie8， 我寫的庫
import 'console-polyfill';//ie8下，如果你不開啟開發者工具，window下是沒有console這個物件的，
//只有開啟了f12才會有這個方法
import 'json3'; //比ie8的json好用
import 'bluebird'; //效能超高的promise實現
import 'fetch-polyfill2'; //fetch 實現，我的另一力作
//上面這幾個可以單獨打包
import react from 'react';
import reactdom from 'react-dom';
var container = document.getelementbyid('root');
class hinput extends react.component ;
this.onchange = this.onchange.bind(this);
}onchange(e) );
this.props.onchange && this.props.onchange(e);
} render() 
}reactdom.render(
, container );

最後頁面底部引用打包好的js檔案就行了。

最後提一下，anujs在ie 下不能使用react-hot-loader，因為它用了許多高階的語法，如object.defineproperty與proxy。

如果大家還想用路由器， anujs倉庫中還內建了乙個相容ie8 的reach-router。

如何讓React anujs 跑在IE8上

讓PHP跑在Mac OS X中

讓QT跑在ARM開發板上

跑在main之前

如何讓React anujs 跑在IE8上

讓PHP跑在Mac OS X中

讓QT跑在ARM開發板上

跑在main之前

相關推薦