zoukankan      html  css  js  c++  java
  • babel安装

    一、babel配置步骤
    1、准备
    系统环境:win7
    配置环境:node,npm(如何安装node以及npm请另寻文档)
    项目文件夹:新建一个文件夹作为一个项目文件夹,打开cmd(快捷键:window+R),进入新建的这个文件夹的目录下,执行npm init(相关信息可一路按Enter键,设置为默认信息),最终生成了package.js文件。

    2、配置 .babelrc 文件
    2.1创建.babelrc文件
    因为在windows系统中,不允许直接右键建立没有文件名的文件,所以创建 .babelrc 文件有两个方式,第一个是直接通过编辑器创建,第二个是直接通过cmd命令行创建。
    以下是cmd命令行创建方式:
    在当前项目文件夹下,使用命令行:

    type nul>.babelrc

    2.2编写.babelrc文件内容
    该文件用来配置转码规则和插件,基本格式如下:

    {
    "presets": [], //设置转码规则
    "plugins": [] //设置插件
    }

    官方提供以下的规则集,可以根据需要安装:

    # ES2015转码规则
    npm install --save-dev babel-preset-es2015

    # react转码规则
    npm install --save-dev babel-preset-react

    # ES7不同阶段语法提案的转码规则(共有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

    然后,将这些规则加入 .babelrc

    {
    "presets": [
    "es2015"
    ],
    "plugins": []
    }

    注意:Babel工具和模块的使用之前,都必须先写好 .babelrc。

    3、使用命令行转码 babel-cli
    Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:

    # 全局安装
    npm install --global babel-cli

    # 在项目文件中安装
    npm install --save-dev babel-cli

    在全局安装babel-cli,这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖, 并且这样做也无法支持不同项目使用不同版本的Babel。所以官网强烈建议我们使用后一种方式,在项目中安装。
    在项目中安装之后,需要改写package.js:

    {
    //...略去了其他的内容
    "devDependencies": {
    "babel-cli": "^6.0.0" //这里的版本号为安装的时候的版本号,一般安装的时候就会自动写入
    },
    "scripts": {
    "build": "babel src -d lib"
    //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录,lib指的是输出的内容的存放目录
    },
    }

    注意:如果创建的目录文件夹名称不为src和lib,请记得一定要替换,不然后续转换时会报错。

    转码的时候,就执行下面的命令:

    npm run build

    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

  • 相关阅读:
    把eclipse 3.4的插件移动到独立目录中
    Crest大家都来山寨一个GObject吧
    c# 扩展方法奇思妙用性能篇一:扩展方法性能初测
    [幽默]今天看了几页c语言入门,想写个ERP, 帮我看看 技术上还差些什么?
    c# 扩展方法奇思妙用高级篇一:改进 Scottgu 的 "In" 扩展
    [个人]我的积分与排名日志
    反驳 老赵 之 “伪”递归
    c# 扩展方法奇思妙用变态篇一:由 Fibonacci 数列引出 “委托扩展” 及 “递推递归委托”
    c# 扩展方法奇思妙用高级篇五:ToString(string format) 扩展
    瑞士军刀 VS 单一职责原则
  • 原文地址:https://www.cnblogs.com/bbqq1314/p/9970515.html
Copyright © 2011-2022 走看看