08-babel

babel命令行使用

• babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用

• 如果我们希望在命令行尝试使用babel，需要安装如下库

  • @babel/core：babel的核心代码，必须安装；
  • @babel/cli：可以让我们在命令行使用babel；

  npm install @babel/cli @babel/core
  

• 使用babel来处理我们的源代码

  • src：是源文件的目录；
  • –out-dir：指定要输出的文件夹dist；

  npx babel src --out-dir dist
  

插件的使用

• 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件

  npm install @babel/plugin-transform-arrow-functions -D
  npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
  

• 查看转换后的结果：我们会发现 const 并没有转成 var

  • 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能
  • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能

npm install @babel/plugin-transform-block-scoping -D 
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

babel的预设preset

• 但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）
• 安装@babel/preset-env预设：npm install @babel/preset-env -D
• npx babel src --out-dir dist --presets=@babel/preset-env

babel的底层原理

• babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢
• 从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
  • 就是编译器，事实上我们可以将babel看成就是一个编译器。
  • Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码
• Babel也拥有编译器的工作流程
  • 解析阶段（Parsing）
  • 转换阶段（Transformation）
  • 生成阶段（Code Generation）

babel-loader

• 在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中

• 那么我们就需要去安装相关的依赖：npm install babel-loader @babel/core

• 我们可以设置一个规则，在加载js文件时，使用我们的babel：

  module:{
      rules:[
          {
              test:/.m?js$/,
              use:{
                  loader:'babel-loader'        
              } 
          }   
      ]
  }
  

指定使用的插件

module:{
    rules:[
        test:/.m?js$/,
        use:{
            loader:'babel-loader',
            options:{
                plugins:[
                     "@babel/plugin-transform-arrow-functions",     
                     "@babel/plugin-transform-block-scoping"  
                ]            
            }     
        }    
    ]
}

babel-preset

npm install @babel/preset-env

test:/.m?js$/,
use:{
    loader:'babel-loader',
    options:{ 
      presets: [
          ["@babel/preset-env"]   
       ]                          
    }     
}  

设置目标浏览器 targets

• 默认适配browserslist，配置的targets属性会覆盖browserslist；
• 但是在开发中，更推荐通过browserslist来配置，因为类似于postcss工具，也会使用browserslist，进行统一浏览器 的适配；

test:/.m?js$/,
use:{
    loader:'babel-loader',
    options:{ 
      presets: [
          ["@babel/preset-env",{
              target:"last 2 version"          
          }]   
       ]                          
    }     
} 

Stage-X的preset

• Stage 0:strawman(稻草人)，任何尚未提交作为正式提案的讨论、想法变更或者补充都被认为是第 0 阶段的稻草人”;
• Stage 1:proposal(提议)，提案已经被正式化，并期望解决此问题，还需要观察与其他提案的相互影响:
• Staae2:draft(草稿)，Staae2的提案应提供规范初稿。草稿。此时，语言的实现者开始观察 runtime 的具体实现是否合理;
• Staae3:candidate(候补)，Staae3提案是建议的候选提案。在这个高级阶段，规范的编辑人员和评审人员必
  须在最终规范上签字。Staae 3 的提案不会有太大的改变，在对外发布之前只是修正一些问题:
• Stage4:finished(完成)，进入 Stage4 的提案将包含在 ECMAScript的下一个修订版中;

babel的配置文件

• babel配置文件的两种方式
  • babel.config.json（或者.js，.cjs，.mjs）文件；
  • .babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件
• 它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）；
  • .babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的
  • babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐