webpack+babel Item inIE Next reportPromise Thinking from undefined mistakes
Problems caused by low version browsers
Recently developed awebpack+babel+react
Item, Generally speaking, localchrome Browse development above,chrome Browser development because it supports most of the newjs Characteristic, So it's not usually neededpolyfill,
such asPromise,string Instanceincludes Such method. Even in older browsers, adoptbabel-runtime
Ofpolyfill It can also be converted, But it didn't happen, Item inIE9 Browser report error, The error is as follows：
Obviously, Used in the projectPromise, howeverIE9 The new feature is not supported, Therefore, error is reported.
that, The problem is coming.babel-runtime Not automaticallypolyfill In the projectPromise Function? Why not? Let's find out.
babel-runtime Did you really help us switch
according tobabel Official website <http://babeljs.io/docs/plugins/transform-runtime/#installation> Introduction,
babel-runtime Followbabel-polyfill equally, It's all about new features that are not supportedpolyfill, just：
babel-runtime: He will not pollute the whole environment, Will be carried out locallypolyfill, In addition, some instance methods will not be converted, as'abc'.includes('a')
, Among themincludes Methods don't translate. It generally combinesbabel-plugin-transform-runtime To use.
： Simple and crude, He will pollute the whole environment, For example, I don't supportPromise The browser willpolyfill A globalPromise Object for calling; in addition, Unsupported instance methods are also added to the corresponding constructor prototype chainpolyfill Method.
So in the example abovePromise,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：
Can see, In the project,babel-runtime It really helped uspolyfill, Why will it be reportedPromise Undefined error???
Promise Undefined cause of error
Sincebabel-runtime Will pass throughbabel Code conversion of compiled code, So we can guess：
The real reason for the error is that some code has not passedbabel-runtime Compilation conversion.
The first thing I think about isnode_modules Modular, Because somenpm Wrapped inwebpack Not required in configurationbabel Compilation, And these packages may need toPromise Native support for.
asvuex, Someone was there beforegithub Similar questions have been raised onvuex 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 becausenpm Packet induced. So there's another possibility：webapck Some code generated by itself.
By locating where the error occurred, The discovery iswebpack Self generated code needsPromise. staywebpack Our website also found the answer
Can be found, staywebpack When using asynchronous load module, require.ensure Native support requiredPromise, Because our project is loaded on demand, That's why the above problems arise. Namely：
webpack Generatednew Promise Related code,
Go beyondbabel Ofbabel-runtime Control range of, onlypolyfill GlobalPromise To solve this problem.
Solve the above problems, Most people think of using otherPromise Ofpolyfill library, asbabel-polyfill perhapses6-promise
etc. This is certainly a solution, But it can be combinedbabel-runtime For globalPromise Conductpolyfill, No additional libraries will be introduced. The code is as follows：
// takePromise Throw as global object window.Promise = Promise
Then?babel-runtime It will be translated as follows：
// takePromise Throw as global object window.Promise =
such, takebabel-runtime OfPromise Ofpolyfill Hang upwindow lower, Reach otherPromise Ofpolyfill Effect.
Selection in cross browser
Most of my background projects, Generally, users are required to usechrome Browser, Only choosebabel-runtime
Can meet the needs, becausechrome Grossjs New features are supported, Such as string instance'sincludes,
althoughbabel-runtime No compilation, But browsers will support it, No problem. But cross browser projects need special consideration.
For cross browser projects, Especially the lower versionIE Time, Suggested choicebabel-polyfill, It can transform both static and instance methods
For the project of the specified browser, such aschrome, Direct usebabel-runtime To convert, It does not convert instance methods.
2,babel Ofpolyfill andruntime Difference <https://segmentfault.com/q/1010000005596587>
3,babel Principle andpolyfill andruntime Difference <https://github.com/ToPeas/blog/issues/2>
4,webpack+babel+transform-runtime, IE PromptPromise Undefined?
5,ES6 + Webpack + React + Babel How to play happily on the low version browser（ lower）