zoukankan      html  css  js  c++  java
  • es6环境搭建

    安装node环境

    地址:https://nodejs.org/en/download/

    建立项目目录

    建立一个项目目录es6-demo,并在目录下建立两个子文件夹src和dist;

    • src:源代码es6的目录
    • dist:编译后es6的目录

    初始化项目

    使用下面命令初始化项目,在项目目录下生成package.json文件:

    npm init
    //或者
    npm init -y
    

    两者区别在于,前者是分步确认生成的信息,后者是默认确认生成的信息;

    全局安装babel-cli

    Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行;Babel提供了babel-cli工具,用于命令行转码;

    npm install babel-cli -g
    

    基本用法:

    # 转码结果输出到标准输出
    $ 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
    

    建立.babelrc

    在项目根目录下,创建.babelrc,.babelrc是Babel的配置文件;该文件是用来设置转码规则和插件的,基本格式如下:

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

    安装转码规则

    在本地安装转码规则模块babel-preset-es2015:

    npm install --save-dev babel-preset-es2015
    

    然后,将规则加入.babelrc文件当中:

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

    编译基本代码

    在项目根目录下建立index.html文件

    /index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>hello es6</title>
        <script src="./dist/index.js"></script>
        </head>
    
        <body>
        Hello es6
        </body>
    
    </html>
    

    引入js文件,是编译后的js文件,即dist目录下的文件;

    在src文件下创建即将要编写的index.js文件

    /src/index.js

    let a = 1;
    let b = 1;
    console.log(a + b);
    

    这里用的let是es6的一种声明方式,接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件。

    首先,我们使用babel命令行来编译:

    babel  src/index.js -o dist/index.js
    

    这样就可以,看见在dist目录下生成一个index.js文件:

    "use strict";
    
    var a = 1;
    var b = 1;
    console.log(a + b);
    

    编译成功。

    使用babel命令行,一大长串,很容易忘记什么,所以,我们可以改造package.json,来使用更容易记住的命令来编译:

     "scripts": {
        "build": "babel src/index.js -o dist/index.js"
    }
    

    在"scripts"模块下,添加上面的命令行,然后使用命令:

    npm run build
    

    就可以直接编译了;

    Webpack自动编译

    具体请参考作者webpack 3.X学习之Babel配置

    参考:

  • 相关阅读:
    Day15模块(导入,使用)
    day14 迭代器,生成器,函数的递归调用
    Day13有参装饰器,三元表达式,匿名函数
    re模块
    Day12装饰器
    subprocess模块windows系统命令和linux系统命令
    Day11名称空间,作用域,闭包函数
    识别 Linux上的设备(磁盘)类型
    Linux lsblk和df命令区别
    Linux远程拷贝scp
  • 原文地址:https://www.cnblogs.com/hawk-zz/p/7884368.html
Copyright © 2011-2022 走看看