webpack的Babel加载器

Ali_ 发布于2019-08-23 11:54 / 2945人阅读

摘要：的转译过程分为三个阶段。标准为例，提供了如下的一些的只转译该年份批准的标准，而则代指最新的标准，包括和。未完待续，继续学习继续补充哦参考文献深入理解原理及其使用

Babel

Babel的转译过程分为三个阶段: parsing, transforming, generating。babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的原生对象，部分原生对象新增的原型方法，新增API等(如Proxy, Set等)，这些babel是不会转译的，需要用户自行引用polyfill来解决。

Babel转译过程：
解析parsing：将代码字符串解析成抽象语法树
变换transforming：对抽象语法树进行转换操作
生成generating：根据变换后的抽象语法树再生成代码字符串

plugins

插件应用于babel的转译过程，尤其是第二阶段transforming，如果这个阶段不使用任何插件的话，babel会原样输出代码。我们主要关注第二阶段使用的插件，因为tranform插件会自动使用对应的词法插件，所以parsing阶段的插件不需要配置

presets预设

为了减少配置转译过程中使用的各类插件的麻烦，babel官方做了一些预设的插件集。
JS标准为例，babel提供了如下的一些preset:
es2015, es2016, es2017, env
es20xx的preset只转译该年份批准的标准，而env则代指最新的标准，包括lastest和es20xx。
另外，stage-0到stage-4的标准成型之前的各个阶段，实验版的presets

stage-0: 稻草人，只是一个想法，可能是babel插件
stage-1: 提案，初步尝试
stage-2: 初稿，完成初步规范
stage-3: 候选，完成规范和初步的浏览器实现
stage-4: 完成，将被添加到下一年度发布

babel-loader

用来处理ES6语法，将其编译成浏览器可以执行的js语法。

module.exports = {
  ...
  module: {
    rules: [{
      test: /.jsx$/
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],//presets设置的就是当前js版本
          plugins: [require("@babel/plugin-transform-object-rest-spread")]//需要的插件
        }
      }
    }]
  }
};

options属性来给loader传递选项

babel-poyfill

polyfill会把ES2015+环境整体引入代码环境中，让你的代码可以直接使用新标准所引入的新原生对象。

要确保在入口处导入polyfill，因为polyfill代码需要在所有代码前先被调用

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

babel-plugin-transform-runtime

babel-plugin-transform-runtime插件依赖babel-runtime, babel-plugin-transform-runtime插件是把js代码中使用的新原生对象和静态方法转换成对babel-runtime包的引用。

未完待续，继续学习继续补充哦~

参考文献
【JavaScript】深入理解Babel原理及其使用

云服务器 GPU云服务器 webpack按需加载自动加载器类加载器加载云主机器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97642.html

通用、封装、简化 webpack 配置

摘要：通用封装简化配置现在，基本上前端的项目打包都会用上，因为提供了无与伦比强大的功能和生态。简化配置的一种方式是使用社区封装好的库，比如。封装了的一些基础配置，然后暴露一些额外配置的接口，并附加本地数据模拟功能，详情可以参考主页。通用、封装、简化 webpack 配置现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项...

PingCAP 2019-08-23 13:52 评论0 收藏0
webpack+babel+react练习流程记录

摘要：简介来构建用户界面的库，不是框架关注于层虚拟单向数据流这些概念如何使用下载文件也可以使用，需要用到的模块介绍是编写组件的一种语法规范，可以看为是的扩展，它支持将和混写在一起，最后使用编译为常规的，方便浏览器解析编写第一个例子使用编写组件 react简介来构建用户界面的库，不是框架关注于view层虚拟DOM 单向数据流 JSX这些概念如何使用react 下载文件 rea...

DDreach 2019-08-19 18:25 评论0 收藏0
webpack走在前端技术的前沿（深入浅出）

摘要：我们也可以不用在命令行里面输入，因为我们可能以后会查询更多东西，因此我们可以，在的里面加入这里的和只是为了输出进度条和，没有实际意义，然后在命令行输入就可以默认使用进行打包了。更具体的就请查看一下官方文档了，毕竟篇幅不能太长。 Webpack 网上有很多webpack的介绍，也有不少的视频，但是不少人看到应该还是不是很了解webpack里面到底是讲什么，而且报错了之后也是不知所措那么...

jayce 2019-08-20 18:18 评论0 收藏0
webpack走在前端技术的前沿（深入浅出）

摘要：我们也可以不用在命令行里面输入，因为我们可能以后会查询更多东西，因此我们可以，在的里面加入这里的和只是为了输出进度条和，没有实际意义，然后在命令行输入就可以默认使用进行打包了。更具体的就请查看一下官方文档了，毕竟篇幅不能太长。 Webpack 网上有很多webpack的介绍，也有不少的视频，但是不少人看到应该还是不是很了解webpack里面到底是讲什么，而且报错了之后也是不知所措那么...

_ang 2019-08-01 17:15 评论0 收藏0
webpack从零开始第5课:模块篇

摘要：目录第课安装和第课配置文件第课做为的一个模块来使用第课插件篇第课模块篇第课在开发中使用本文参考文档官方模块配置模块配置中文翻译模块配置中文翻译版本官方内置清单第三方清单代码托管及用法配置官方文档模块总览我是首页万事开头 webpack目录第1课: 安装webpack和webpack-dev-server 第2课: 配置文件第3课: 做为node的一个模块来使用第4课: ...

tinylcy 2019-08-21 18:20 评论0 收藏0