babel@6.2.0預編譯的ES6代碼無法在IE8上愉快的運行，各位前輩有辦法嗎？

01-14

babel只做了es6 to es5的轉換，而IE8對es5算不上友好。更關鍵的是，default是IE的關鍵詞卻直接出現在轉換出來的es5代碼中，這讓IE8直接就報錯了:( .請問各位已經用es6做項目的前輩們，稍微指點一二可好？
----------------------------------------------------- 2015年11月27日 15:27:08 -----------------------------------------------
已經使用了es-shims/es5-shim · GitHub 的墊片庫，但是依然無法解決default關鍵詞的問題。
----------------------------------------------------- 2015年11月27日 16:53:03 -----------------------------------------------
問題已經解決了，感謝@camsong 。

總結一下：
之所以會出現default關鍵字，正如camsong所說，是export default引起的。解決方式就是暫時不使用export default，使用import {} 和 export來完成模塊化。在引入react時，使用
**const react = require("react");**
的寫法。

這個方案目前有 Bug 不能解決問題，請轉向 @賀師俊的回答。

可以使用這兩個插件轉換到 ES3 的對應語法（給關鍵字加上引號）：

ES3 property literals transform
ES3 member expressions literals transform

【3月15日更新】

最近的babel 6.6似乎已經修復了相關的bug，所以應該可以不用workaround了。（不過據說又引起了其他bug，導致可能被reverse掉……所以建議還是再等一兩個版本。）

【2月6日回答】

@北白川糰子的答案指出可以使用 es3-member-expression-literals 轉換。不過由於 Babel 6 目前有個 bug https://phabricator.babeljs.io/T2817 幾個月還沒修，所以還是不行的。目前的 workaround，你可以使用 @yaya 提到的 es3ify ，或者使用 uglifyjs 再做一次轉換。

注意，為了兼容 IE8，光使用上述 plugins 還是不夠的。你可能還需要使用 es5-property-mutators、jscript 等 plugins，以及使用 polyfill / shim。

最後吐槽下，babel 確實還是有不少 bug……

1. 等待更新。

2. 使用sorrycc/es3ify-loader · GitHub

由於 IE8 中不支持 default 做 key，這個暫時無解。

不過你暫時可以這樣，不使用 export default，改用傳統的 module.exports =。

引用時使用 import 或 require 均可

1. 如果是webpack@1.14.0之前的版本，用 @北白川糰子答案下的兩個插件即可：

ES3 property literals transform
ES3 member expressions literals transform

如果是class問題，babel設置["transform-es2015-classes", {"loose": true}]

2. 如果是webpack@1.14.0，由於 UglifyJS ~v2.7.0已經把screw_ie8默認為true，所以需要配置screw_ie8: false。但由於webpack沒把配置傳給uglifyJs，也就是說配了也沒卵用。所以要麼回退到webpack@1.13，要麼等webpack更新，要麼自己手動改npm包代碼。詳情見以下鏈接：

IE8 下訪問webpack.UglifyJsPlugin 壓縮的代碼出錯 · Issue #6 · SamHwang1990/blog

Merge pull request #3926 from eu81273/webpack-1 · webpack/webpack@f66f024

手動更改npm的方法：

（1）node_modules/webpack/lib/optimize/UglifyJsPlugin.js

91行把

ast.figure_out_scope();

改為：

ast.figure_out_scope(options.mangle || {});

（2）配置screw_ie8: false

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, screw_ie8 : false }, mangle: { screw_ie8: false }, output: { screw_ie8: false } })

2016-12-9 修改，目前只用 loose mode 是解決不了 default 關鍵字的問題了，再加上 es3ify-loader 轉一遍可以達成目的。

另外代碼壓縮工具可能回去掉 "default" 的引號，需要注意下。

總結：用 loose mode 解決 Object.defineProperty 的問題，es3ify-loader 解決 default 關鍵字的問題，再用 es5-shim 做 polyfill。

使用es3ify-loader並經過sourcemap後，調試比原來痛苦，因為sorcemap映射的不是我們寫的源碼，而是es3ify-loader轉換前babel轉化後的代碼。我考慮還是用babel-loader，只不過在UglifyJsPlugin壓縮後在使用grunt之類的調用es3ify在把代碼轉化一遍。

GitHub - mingfengwang/webpack-react-redux

這裡面總結了我實際使用 react redux redux-router webpack es6es7 去兼容ie8的N多坑參考了@賀師俊老師的一些回答以及ie8的一些fix 希望對渴求最新技術但困於ie8的你有些幫助

既然是 module 轉 commonjs 產生的關鍵字問題，是不是可以嘗試使用 rollup-babel 來轉？直接繞過 commonjs。（疑問句是因為我拿著爪雞懶得試驗了?_?

@賀師俊的方法太長來個簡單的 es3xxx還是要的然後接下來只需要用ugliy一下就可以啦