Comments (23)
babel-polyfill
内部实现包含了所有的polyfill
,而且部分polyfill
是通过改变全局对象的方式。使用的方式也是直接在你的入口文件中去引入babel-polyfill
。
babel-runtime
及其插件babel-plugin-transform-runtime
,会在babel
对你的代码编译的过程中,分析你的代码,如果用到了一些新的API
,需要引入polyfill
的代码,会自动帮你引入在core-js
或者regenerator.js
中的shim代码。babel-plugin-transform-runtime
这个插件主要是做了一层映射,映射到babel-runtime
内引用的core-js
或regenerator.js
中具体对应的helper
:
如果你使用了一些新的实例上的方法,例如:
const str = [1, 2, 3]
str.includes(2)
像这种实例上添加的新的方法,仅仅用core-js中的shim是没法解决的。这个时候必须要引入babel-polyfill
。
babel-runtime
及其插件babel-plugin-transform-runtime
事实上就是按需去引入你需要的helper
,而babel-polyfill
是全部引入进去,从某种程度上说,确实比全部引入babel-polyfill
最终打出的包更小。
from blog.
@lcoder 对,一个bundle里面一个但不用太在意,这些helper的体积很小,用这些helper换来的是自动引入polyfill的开发体验
from blog.
Up!
from blog.
cool
from blog.
请问一下作者,babel-runtime不污染全局,用到什么需要polyfill的api需要手动引入,比如promise;而babel-plugin-transform-runtime引入后,还是会用到什么api需要单独手动引入么???
若是这样,这样开发时岂不是很繁琐?
from blog.
@wonyun 首先感谢回复。行文上可能有疏漏引起误解。因为 babel-runtime 都是自动帮你引入所需 polyfill,但每个文件引入的都是全量的 polyfill,很容易引起体积暴涨。所以我们可以加上 babel-plugin-transform-runtime,这样 runtime 所用的 polyfill 就会从 transform-runtime 里引入,就避免了体积暴涨的问题。
from blog.
@brunoyang ,不太明白这句因为 babel-runtime 都是自动帮你引入所需 polyfill
,比方说我在代码中用到了Promise,在IE8下,babel-runtime难道会自动的帮我require这个promise的polyfill,还是需要开发者在代码开头手动引入这个promise polyfill文件?
from blog.
@wonyun 应该这么说,Babel 中 runtime 只是个 helper 函数库,runtime transform 根据 ast 结果帮你引入所需 helper 函数。所以是只用 runtime 是需要手动,但不要这样用,而是用 runtime transform。
from blog.
@brunoyang ,非常感谢,理解其中情况,babel-runtime是会自动引入polyfill的
from blog.
博主,问下transform-runtime
,transform-decorators-legacy
,transform-class-properties
这些plugins引入的数组顺序会有关系吗
from blog.
好文,顶
from blog.
@wonyun 没明白意思
非常感谢,理解其中情况,babel-runtime是会自动引入polyfill的
这句话中babel-plugin-runtime-transform 是自动的吧?所有的helper,一个bundle里面就一个;而babel-runtime,一个模块(文件)里一个,打包成bundle就有好多冗余的代码了。
from blog.
那问问作者,babel-plugin-runtime-transform,引入的模块,需要手动安装并在.babelrc添加plugins或presets么?
from blog.
现在引入了runtime-transform,但是发现array中的fill不起作用,然后又去引用了polyfill,是在webpack中引入的,但是发现都不起作用
from blog.
好文章!顶顶
from blog.
写得不错
from blog.
写的不错,顶
from blog.
请问作者, es2015 跟 stage-* 是不是得同时存在, 如果自己写的代码存在es6、7语法的话
from blog.
是不是说transform-runtime有两个作用:
-
如果只用babel-runtime,那么如果多个模块都引用了helper,那么这些模块中都会有这些helper。如果用了transform-runtime,会将重复的helper提取出来让所有的模块重用
-
如果只用babel-runtime,需要通过类似const Promise = require('babel-runtime/core-js/promise')这样的方式手动引入。而如果用了transform-runtime就不用管了,需要用到的地方会自动引入
这样的理解对吗?
from blog.
还有一个疑问就是,babel-polyfill和babel-runtime + transform-runtime这两种方案是不是有以下区别:
-
babel-polyfill的方案会把所有的都打包进来
-
babel-runtime + transform-runtime 的方案只会把那些用到的helper提取打包进来,而那些没用到的则不会。
那么这样的话babel-runtime + transform-runtime会比babel-polyfill的方案更省空间。
这样的理解对吗?
from blog.
@xiaozhouwu babel-runtime 是会自动引入 polyfill 每一个模块 都有
ransform-runtime 的方案只会把那些用到的重复helper过滤掉 打包。
babel-polyfill 应该是全局的
from blog.
有点疑惑想请教,transform-runtime中的"helpers"和"moduleName"到底设置了什么,我是用webpack打包的,感觉没什么影响,官网上的解释也不是很理解
from blog.
"上面提到的插件可以将语法从 es6 转成 es5,但没有提供 api 的转码功能,如 Promise、..."
不太对吧,
比如babel-plugin-transform-object-assign属于 babel-plugin-*可以转换Object.assign
from blog.
Related Issues (20)
- koa源码分析(五) - koa 2.0 HOT 1
- cors和koa-cors HOT 2
- koa-router
- if-modified-since vs if-none-match
- Async就要来了,来不及解释了,快上车! HOT 6
- static file & koa-static HOT 2
- cookie & session & koa HOT 2
- 倒霉蛋李建国 HOT 2
- Koa 在 Macaca 中的实践
- 使用 IntersectionObserver 和 registerElement 打造 Lazyload HOT 4
- JS 与迭代器 HOT 1
- LRU(近期最少使用算法)及实现
- 中文输入法的救星 composition event
- react-redux 的 hooks HOT 1
- 抛弃难用的stream
- koa源码分析(二) - context.js
- koa源码分析(三) - request.js
- koa源码分析(四) - response.js
- Context,React中隐藏的秘密! HOT 14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.