zoukankan      html  css  js  c++  java
  • babel

    Babel 转码器

    1. .babelrc 存放在项目的根目录下

    1. 基本格式

      {
        "presets": [],
        "plugins": []
      }
      
    2. presets字段设定转码规则

      # 最新转码规则
      $ npm install --save-dev babel-preset-latest
      
      # react 转码规则
      $ npm install --save-dev babel-preset-react
      
      # 不同阶段语法提案的转码规则(共有4个阶段),选装一个
      $ npm install --save-dev babel-preset-stage-0
      $ npm install --save-dev babel-preset-stage-1
      $ npm install --save-dev babel-preset-stage-2
      $ npm install --save-dev babel-preset-stage-3
      
      {
          "presets": [
            "latest",
            "react",
            "stage-2"
          ],
          "plugins": []
      }
      

    2. 转码

    1. 命令行
      $ npm install --global babel-cli
      
      # 转码结果输出到标准输出
      $ babel example.js
      
      # 转码结果写入一个文件
      # --out-file 或 -o 参数指定输出文件
      $ babel example.js --out-file compiled.js
      # 或者
      $ babel example.js -o compiled.js
      
      # 整个目录转码
      # --out-dir 或 -d 参数指定输出目录
      $ babel src --out-dir lib
      # 或者
      $ babel src -d lib
      
      # -s 参数生成source map文件
      $ babel src -d lib -s
      
      
    2. 将babel-cli安装在项目之中
      # 安装
      $ npm install --save-dev babel-cli
      
      #然后,改写package.json。
      {
        // ...
        "devDependencies": {
          "babel-cli": "^6.0.0"
        },
        "scripts": {
          "build": "babel src -d lib"
        },
      }
      #转码
      $ npm run build
      
    3. babel-node babel-cli工具自带一个babel-node命令,提供一个支持 ES6 的 REPL 环境
      执行`babel-node`就进入 REPL 环境。
      
      #直接运行 ES6 脚本
      babel-node es6.js
      
      #babel-node也可以安装在项目中。
      $ npm install --save-dev babel-cli
          #然后,改写package.json。
      {
        "scripts": {
          "script-name": "babel-node script.js"
        }
      }
      
    4. babel-core 调用 Babel 的 API 进行转码

    本文来源个人对 阮一峰es6 总结,以供今后查阅。

  • 相关阅读:
    质量属性--信息技术手册
    蓝桥杯赛前整理
    感悟:荔枝架构实践与演进历程
    以《淘宝网》为例,描绘质量属性的六个常见属性场景
    感悟:淘宝架构演进背后——零售业务中台架构设计探讨及实践
    为什么要考研???
    寒假学习笔记03
    寒假学习笔记02
    寒假学习笔记01
    数据清洗与数据处理
  • 原文地址:https://www.cnblogs.com/topyang/p/11392831.html
Copyright © 2011-2022 走看看