Problems caused by low version browsers

Recently developed a webpack+babel+react
Project of , Generally speaking, local chrome Browse development above ,chrome Browser development because it supports most of the new js characteristic , So it's not usually needed polyfill,
such as Promise,string Instance of includes Methods, etc . Even in older browsers , adopt babel-runtime
Of polyfill It can also be converted , But it didn't happen , Project in IE9 Browser report error , The error is as follows :



Obviously , Used in the project Promise, however IE9 The new feature is not supported , Therefore, error is reported .

that , Here comes the question ,babel-runtime Not automatically polyfill In the project Promise Function , Why not ? Let's find out .

babel-runtime Did you really help us switch

according to babel Official website <http://babeljs.io/docs/plugins/transform-runtime/#installation> Introduction of ,
babel-runtime Follow babel-polyfill equally , It's all about new features that are not supported polyfill, just :

*
babel-runtime: He will not pollute the whole environment , Will be carried out locally polyfill, In addition, some instance methods will not be converted , as 'abc'.includes('a')
, Of which includes Methods don't translate . It generally combines babel-plugin-transform-runtime To use .

*
babel-polyfill
: Simple and rough , He will pollute the whole environment , For example, I don't support Promise The browser will polyfill A global Promise Object for calling ; in addition , Unsupported instance methods are also added to the corresponding constructor prototype chain polyfill Method of .

So in the example above Promise,babel-runtime Did you really help us switch , Test it in the project , It did change .
let _promise = new Promise()
As above , Test it in the code , View the corresponding conversion file :



You can see , In the project ,babel-runtime It really helped us polyfill, Why will it be reported Promise Undefined error ???

Promise Undefined cause of error

since babel-runtime Will be right babel Code conversion of compiled code , So we can guess :

The real reason for the error is that some code has not passed babel-runtime Compile transformation .

The first thing I think about is node_modules modular , Because some npm Wrapped in webpack Not required in configuration babel Compilation of , And these packages may need to Promise Native support for .

as vuex, Someone was there before github Similar questions have been raised on vuex requires a promise polyfill in this browser
<https://github.com/vuejs-templates/webpack/issues/474>. Because it is judged in its source code :
assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in
this browser.");
This situation needs to be mainly , After investigation , In this project , I didn't find it because npm Package induced . So there's another possibility :webapck Some code generated by itself .

By locating where the error occurred , The discovery is webpack Self generated code needs Promise. stay webpack Our website also found the answer
<https://webpack.js.org/guides/migrating/#require-ensure-and-amd-require-are-asynchronous>




It can be found that , stay webpack When using asynchronous load module , require.ensure Native support required Promise, Because our project is loaded on demand , That's why the above problems arise . Namely :

webpack Generated new Promise Related code ,
go beyond babel Of babel-runtime Control range of , only polyfill Global Promise To solve this problem .

Solve the above problems , Most people think of using other Promise Of polyfill library , as babel-polyfill perhaps es6-promise
etc. , This is certainly a solution , But it can be combined babel-runtime For global Promise conduct polyfill, No additional libraries will be introduced . The code is as follows :
// take Promise Throw as global object window.Promise = Promise
then babel-runtime It will be translated as follows :
// take Promise Throw as global object window.Promise =
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_promise___default.a()
such , take babel-runtime Of Promise Of polyfill Hang to window lower , Reach other Promise Of polyfill Effect of .

Selection in cross browser

Most of my background projects , Generally, users are required to use chrome browser , Select only babel-runtime
Can meet the needs , because chrome gross js New features are supported , Such as string instance's includes,
although babel-runtime Will not compile , But browsers will support it , No problem . But cross browser projects need special consideration .

*
For cross browser projects , Especially the lower version IE Time , Recommended options babel-polyfill, It can transform both static and instance methods

*
For the project of the specified browser, such as chrome, Direct use babel-runtime To convert , It does not convert instance methods .

reference

1,webpack file
<https://webpack.js.org/guides/migrating/#require-ensure-and-amd-require-are-asynchronous>
2,babel Of polyfill and runtime The difference between <https://segmentfault.com/q/1010000005596587>
3,babel Principles and polyfill and runtime The difference between <https://github.com/ToPeas/blog/issues/2>
4,webpack+babel+transform-runtime, IE Next tip Promise Undefined ?
<http://www.cnblogs.com/pheye/p/7659910.html>
5,ES6 + Webpack + React + Babel How to play happily on the low version browser ( lower )
<https://segmentfault.com/a/1190000006930013>