zoukankan      html  css  js  c++  java
  • 【拥抱ES6】搭建一个ES6环境

    如今,新的ECASCript规范已经出来一段时间了,因此有必要学习一下。

    首先上一个阮老师的教程:ECMAScript 6 入门

    ES6(es2015)是新的规范,由于现在浏览器支持的情况并不乐观,有的部分支持或干脆不支持,因此,我们很有必要来一个中间层工具,转译ES6成ES5,让我们使用上ES6的很多新的特性,同时写出来的代码转译成浏览器几乎都支持的ES5,这样一举双得,岂不快哉。

    这个工具是什么呢?以前见过但并没有深入了解过,Babel

    这里还有一个在线的转译工具。try it out!  https://babeljs.io/repl/

    然后我们安装一下babel的命令行环境

    1,首先安装babel-cli(用于在终端使用babel)

    npm install babel-cli -g

    2,进入某个项目根目录,安装babel-cli和babel-preset-es2015

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

    注:Babel5版本默认包含各种转换插件,然而Babel6.x相关转换插件需要自己下载,如transform-es2015-arrow-functions、transform-es2015-classes等,而ES2015 preset包含了所有插件。如果不安装任何插件,那么在命令行进行转换是没有任何效果的!

    其中--save参数自动更新package.json文件,写进依赖项

    3,配置编译规则

    项目根目录下新建文件.babelrc(注意,以点开头的文件是隐藏文件,需要在linux环境通过命令创建),配置如下:

    4,项目目录结构

    然后我们用命令行进入这个目录后,执行

    babel es6.js -w -o es5.js

    稍等片刻就会发现,es6.js编译并输出了es5.js,

     

    并且每次保存后,都会自动编译,并显示changed [文件]

    这样,一个简单的基本的编译环境就OK了。

    当然,网上还有很多的方法,比如在package.json里面加入执行命令。或者是配合gulp来使用。等等。

    我在这里就不详细说明了。

  • 相关阅读:
    GUI 之 JDialog弹窗
    GUI Swing 之 JFrame窗体
    GUI 键盘监听事件
    GUI 窗口监听事件
    GUI 鼠标监听事件,模拟画图工具
    shell编程
    Ubuntu20.04 Linux初识
    rlwrap的使用
    5个相见恨晚的Linux命令,每一个都非常实用
    Bash初识与常用命令
  • 原文地址:https://www.cnblogs.com/hl-520/p/5795141.html
Copyright © 2011-2022 走看看