zoukankan      html  css  js  c++  java
  • Bable实现由ES6转译为ES5

    Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行。

    举例说明:

    转译前(ES6格式)代码如下:

    let User = {
    name : '张三',
    age : 22
    };
    
    let { name, age } = User;
    console.log( name, age );

          

    转译后(ES5格式)代码如下:

    'use strict';
    
    var User = {
        name: '张三',
        age: 22
    };
    
    var name = User.name,
        age = User.age;
    
    console.log(name, age);

      

    如上用Babel转译为ES5格式后就可以在现有的javascript环境下运行了。 

    babel安装与项目部署步骤如下:

    1.新建一个babel_test文件夹,并在此文件夹里面新建src和dist两个文件夹。

    2.在babel_test目录下初始化项目,生成 package.json文件。

    npm init -y

    3.安装bable(全局安装&本地安装) 

     全局安装

    npm install -g babel-cli

     本地安装

    npm install --save-dev babel-preset-es2015 babel-cli(建议安装在当前目录下)

    4.在babel_test目录下新建 .babelrc文件,该文件用来设置转码规则和插件,基本格式如下。(Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel必须要配置这个文件。)

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

       

    5.在src文件夹下面新建代码格式为ES6的文件1.js。(文件代码如本文前面ES6格式的代码)  

    6.在cmd项目目录下运行 babel src/1.js -o dist/2.js ,babel会将ES6代码自动转译并在dist文件下生成ES5格式的代码文件2.js。(文件代码如本文前面ES5格式的代码)

    7.编译成功,直接引用1.js就可以在现有环境下执行了。

  • 相关阅读:
    IO编程__字节流__输入
    IO编程__文件夹处理__显示文件夹下所有文件名称
    IO编程__文本文件处理
    IO编程__文件对象
    画坦克__线程__V2__第二种方式调用
    画坦克__线程__V1__第一种方法创造线程
    画坦克__敌人坦克
    画坦克__坦克可移动
    【自动化__GUI自动化】__java__selenium__断言__表格标题内容断言
    选项框
  • 原文地址:https://www.cnblogs.com/luxiaoxing/p/7308700.html
Copyright © 2011-2022 走看看