zoukankan      html  css  js  c++  java
  • 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6。

    工具:node,gulp,gulp-babel,babel-preset-es2015。

    备注:只介绍基于node,gulp下的babel编译es6。node安装请自行网搜。npm转淘宝镜像cnpm请自行网搜。

    开始:创建项目文件夹;打开命令行工具:右键开始菜单--运行--输入cmd--回车。

    1:检验node是否安装成功:输入    (有显示版本号就表示安装成功)

    1 npm -v
    2 node -v

    1-1:检验淘宝镜像是否安装成功:输入(有显示版本号就表示安装成功)(若安装了淘宝镜像之后的  npm 命令请替换为 cnpm)

    1 cnpm -v

    2:安装npm工具包   gulp,gulp-babel,babel-preset-es2015  输入

    1 npm gulp gulp-babel babel-preset-es2015 --save-dev

    3:配置编译环境

    3-1:配置babel编译需要的内容

      在项目文件夹中新建文件,名称  .babelrc   (windows下是无法直接创建点开头的文件的,通过编辑器或者IDE来创建就可以了)。

      在 .babelrc 写入以下内容

    1 {
    2   "presets": [
    3     "es2015"
    4   ]
    5 }

    3-2:配置gulp运行需要的内容

      在项目文件夹中新建文件,名称 gulpfile.js

      在 gulpfile.js 写入以下内容

     1  //引入gulp,gulp-babel的npm模块;
     2   var gulp = require('gulp');
     3   var babel = require('gulp-babel');
     4   
     5   //创建gulp运行代码
     6   gulp.task('babel', function () { //‘babel’ gulp的脚本名称,自定义命名
     7       return gulp.src(‘dev.js’) //js入口文件,可用绝对路径、相对路径,是文件类型
     8           .pipe(babel())          //运行gulp-babel进行编译
     9           .pipe(gulp.dest(‘src’))  //编译后的文件输出地址,是文件夹类型
    10  });

    3-3:执行gulp进行编译,命令行工具进入到项目目录,输入

    1 gulp babel         //babel就是要执行gulp的脚本名称,命名成什么就改成相应的

    3-4:输入完成后回车就可以了。到输出目录去查看js文件吧。

  • 相关阅读:
    123
    搭建https://github.com/vulhub/vulhub靶场_初稿
    【译】 渗透测试实战第三版(红队版)
    sqlmap
    fiddler一些高级用法
    安装django和selenium
    python中os模块
    python通过日志分析加入黑名单
    python简单的购物系统
    python文件操作
  • 原文地址:https://www.cnblogs.com/ygjoe/p/6909889.html
Copyright © 2011-2022 走看看