webpack之babel学习系列1——babel历史

第二篇webpack之babel学习系列2——babel设计,组成

前端的蓬勃发展得益于 Google的V8引擎(2008年出现),[Node.js]的诞生(2009年出现,npm 10年出现); V8引擎把 Javascript 的运行速度提上来了(有兴趣的可以看下 Chrome 第一次出现的时候,大家对网页加载速度惊叹),有了 Node.js 前端出现了打包、编译变得工程化,前端一下子从[石器时代]进入到了工业化时代 这样才使得使用 Javascript 使用量一直排在第一 ,吊打排名第二的Java 前几年 大家都吐槽 Javascript 变化的非常快,各种框架/工具 百花齐放;但到 17年后明显平稳了些。 为什么?因为那会啥也没有,没有好用的轮子,没有好有的框架,没有标准,大家迫切的通过各种方式来提高开发效率,慢慢的这些问题都解决了,前端发展就平稳了很多。所以从历史发展的角度看问题,会更清晰。

说到[前端编译],打包就离不开 Babel、webpack,他们都是开发的基石!

what is Babel

简单讲 Babel 是 Javascript 编译器 ,将 ES6,ES7 ,ES8 转换成 浏览器都支持 的ES5 语法,并提供一些插件来兼容浏览器API的工具。是怎么实现的勒, Babel 会将源码转换 AST(抽象语法树) 之后,通过便利AST树,对树做一些修改,然后再将AST转成code,即成源码,通俗讲就是整了个容,浏览器觉得挺漂亮的,让代码在浏览器上耍撒

// 这种箭头函数浏览器肯定是识别不了的
[1, 2, 3].map((n) => n + 1);

// Babel 转换了下 啾的一下 就变成了下面的代码,类似 .Java 转换成 .Class 字节码
[1, 2, 3].map(function(n) {
  return n + 1;
});

Babel 版本

  • 2015-02-15,6to5重命名为babel
  • 2015-03-31,babel 5.0发布
  • 2015-10-30,babel 6.0发布
  • 2018-08-27, babel 7.0发布

转发:https://zhuanlan.zhihu.com/p/57530472

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack中使用Babel是为了在项目中使用最新的JavaScript语法和功能,同时保证在旧版本浏览器中的兼容性。Babel可以将新版本的JavaScript代码转换为较旧版本的代码,以便在不支持新语法的浏览器中运行。 要在Webpack中使用Babel,首先需要安装相关的依赖。可以使用以下命令安装: ``` npm install --save-dev babel-loader @babel/core @babel/preset-env ``` 然后,在Webpack配置文件中配置Babel。假设你的Webpack配置文件名为`webpack.config.js`,可以在该文件中添加以下代码: ```javascript module.exports = { // ...其他配置项 module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }; ``` 上述配置中,我们通过`module.rules`数组中的一个规则来告诉Webpack当遇到`.js`文件时,使用`babel-loader`进行转译。我们排除了`node_modules`目录,因为通常不需要对第三方库进行转译。 在Babel的配置中,我们使用了`@babel/preset-env`预设,它可以根据目标环境自动确定需要转译的语法和插件。 除了以上配置外,还可以在项目根目录下创建一个`.babelrc`文件,用于存放Babel的配置项。例如: ```json { "presets": ["@babel/preset-env"] } ``` 这样,Webpack在使用Babel进行转译时,会自动读取`.babelrc`文件中的配置。 这是一个简单的Webpack配置示例,用于在项目中使用Babel。你可以根据自己的需求进行更复杂的配置,例如添加更多的Babel插件或配置不同的预设。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值