webpack+babel Project in IE Next report Promise Thinking from undefined mistakes
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 .
： 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 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
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 =
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 .
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 ?
5,ES6 + Webpack + React + Babel How to play happily on the low version browser （ lower ）