babel的polyfill和runtime的区别

Posted 2023-05-01

参考技术A ES6现在浏览器都支持的不够,
nodejs的v8同样,
即使用use
strict,
很多特性也都不支持
babel可以把es6转成传统的javascript,
就是说你写es6,
然后用babel,
就可以正常在浏览器中运行了,
es6是发展方向。
babel-polyfill
使用场景
Babel
默认只转换新的
JavaScript
语法，而不转换新的
API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise
等全局对象，以及一些定义在全局对象上的方法（比如
Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用
babel-polyfill，为当前环境提供一个垫片。
babel-runtime
使用场景
Babel
转译后的代码要实现源代码同样的功能需要借助一些帮助函数，例如，
[name]:
'JavaScript'

转译后的代码

webpack.config.js====配置babel

更多内容已经迁移至掘金，欢迎来指导学习：

https://juejin.im/post/5d64cbd56fb9a06afe12a563

 

# 1. 安装依赖

babel-loader: 负责 es6 语法转化

babel-preset-env: 包含 es6、7 等版本的语法转化规则

babel-polyfill: es6 内置方法和函数转化垫片

babel-plugin-transform-runtime: 避免 polyfill 污染全局变量

 

cnpm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-env
cnpm install --save-dev babel-polyfill babel-runtime

 

# 2. 创建一个单独的babel配置文件 .babelrc，配置如下

{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["transform-runtime"]
}

 

# 3. 在webpack.config.js中的配置

module.exports = {
    module: {
        rules: [
            //配置babel，自动编译es6语法
            {
                test: /\\.js$/,
                exclude: /(node_modules)/,
                loader: \'babel-loader\'
            }
        ]
    },
}

# 注意：babel-loader:8.X版本报错的问题（建议直接使用7.1.5版本）

cnpm install --save-dev babel-loader@7.1.5

# 4. 测试

在js文件中，写es6语法，然后编译文件，如果顺利通过，那么配置成功

 

# 5. 关于babel-polyfill

它需要在我们项目的入口文件中被引入，或者在webpack.config.js中配置：

require("babel-polyfill")

import "babel-polyfill"

　一般在webpack项目中一般使用下面的方式

　 module.exports = {
　　　　entry: ["babel-polyfill", "./src/js"]
　　};

 

# 6.在 index.js中使用：

import "babel-polyfill";
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);
console.log("可以使用ES6语法："+arrB.includes(8));