`

使用gulp进行ES6的转码

    博客分类:
  • ES6
阅读更多

ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。作为新一代有理想有追求的程序员,这样的一个好东西我们当然不能放过。

但是ES6的兼容问题让大家很是头疼,还好有ES6转码器这样一个东西可以使我们摆脱这样的困扰,那么作为一名gulp的忠实粉丝,我们该如何简便快速实现ES6向ES5的转码呢:

1.首先我们需要下载gulp-babel插件和babel-preset-es2015规则集:

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

 2.接下来,我们开始编写gulpfile.js文件:

var gulp = require('gulp');
var babel = require('gulp-babel');
var config={
    es6file:'src/js/test.js',
    es5file:'dist/js/'
};
gulp.task('es6', function () {
    return gulp.src(config.es6file)
        .pipe(babel({
            presets: ['es2015']
        }))
        // .pipe(uglify())
        .pipe(gulp.dest(config.es5file));
});
gulp.task('default', function () {
    gulp.watch(config.es6file, ['es6']);
});

 3.最后,输入gulp命令开启任务监视:

gulp

 4.接下来在src/js/test.js文件中写入如下ES6代码保存,测试是否成功:

let arr=[1,6,8,3];
let a="likeke";
arr.map(item=>item+1);

  我们打开dist/js/test.js文件将会看到转换成功的代码:

 

"use strict";

/**
 * Created by likeke on 16-9-28.
 */
var arr = [1, 6, 8, 3];
var a = "likeke";
arr.map(function (item) {
  return item + 1;
});

 

1
1
分享到:
评论

相关推荐

    gulp-es6-seed:gulp-es6种子

    gulp-es6种子使用NodeJS将Gulp-es6种子与可移植ES6-> ES5文件夹结构: gulp-es6—seed/-----es5/-----es6/--------test----gulpfile.js----package.json----README.mdNPM依赖项: gulp-babel gulp-sourcemaps源地图...

    gulp_js_es6-es5_转码及压缩.rar

    这里,`gulp-babel`是用于ES6转码的插件,`@babel/core`和`@babel/preset-env`是Babel的核心库和预设环境,它们将帮助我们把ES6代码转换为ES5。而`gulp-uglify`则用于代码压缩。 在项目根目录下创建`gulpfile.js`,...

    gulptemp:用于requirejs和es6的gulp项目模板

    适合初学者的gulp + requirejs的项目模板 ...es6转码 eslint检测 添加版本信息 风格 ass 合并 压缩 加前缀 打版本 源图 图片压缩优化 html 压缩 修改网址 打包前清理 打包后拷贝目录 编辑器的一致性 .editorconf

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    babel是一个广泛使用的转码器,可以将ES6代码完美地转换为ES5代码,使得我们可以在项目中使用ES6的特性,而不需要等到浏览器的支持。同时,我们也学习了如何在Webstorm中使用babelpreset以正确识别ES6代码。

    gulp4babel一个优雅的移动端css框架

    `babel` 则是一款广泛使用的JavaScript转码器,它能够将ES6+的代码转换为广泛支持的ES5语法,确保代码在各个浏览器中都能正常运行。`babel` 配合`@babel/preset-env`插件,可以根据目标环境自动配置需要转换的语法...

    前端开源库-gulp-babel-globals

    在前端开发中,Gulp通常被用来管理源代码的转换,比如使用Babel进行转码。 在使用`gulp-babel-globals`时,开发者可以方便地将全局变量转换为ES6模块,这样就能在项目中安全地使用这些全局变量,同时保持代码的现代...

    如何让node运行es6模块文件及其原理详解

    如果项目中需要独立引用src目录下的各个文件,可以使用Gulp配合Babel进行逐个文件的转换。Babel是一个广泛使用的JavaScript编译器,可以将ES6+代码转换为向后兼容的JavaScript版本。 配置Gulp任务: ```javascript ...

    Frontend-Starter-Kit:由Gulp,HTML5 bolierplate,Sass,PostCss和Webpack支持的前端项目的样板(用于Babel转码)

    下载所需的软件包后,您可以开始使用入门工具包,或更改文件夹结构以适应您的需要(如果不使用任何图像,请删除图像或图标文件夹,或者禁用一些项目不需要的gulp任务等)入门Gulp任务gulp手表Frontend Starter Kit...

    gulp-recipes:吞咽食谱

    例如,`src('src/**/*.js')` 获取源文件,`pipe(babel())` 进行转码,`pipe(gulp.dest('dist'))` 输出到目标目录。 5. **watch 功能**:Gulp 可以监视文件变化并自动触发任务。这对于开发过程中的实时编译和刷新...

    rxjs-babel-browserify-gulp-demo

    标题中的"rxjs-babel-browserify-gulp-demo"是一个项目示例,主要展示了如何在JavaScript环境中结合RxJS、Babel、Browserify和Gulp这四个工具进行前端开发。这些工具在现代JavaScript开发中扮演着重要角色,下面将...

    开发日志1

    例如,由于项目中混用了ES5、ES6和ES7语法,必须借助Babel进行转码。然而,在Gulp中配置Babel并不直观,需要适配特定版本的`babel-core`和`gulp-babel`,同时还需要`babel-plugin-transform-runtime`来支持ES7的`...

    App-project-skeleton:webpack + npm +更少+ gulp

    在实际开发中,我们可以使用Webpack的开发服务器(dev-server)进行热更新,提高开发效率。同时,Gulp可以配合Webpack实现进一步的构建优化,例如压缩代码、提取CSS到单独文件等。通过这些工具的结合使用,"App-...

    PureJS (6.5):配置文件

    例如,一个`.babelrc`文件用于配置Babel转码器,将ES6+的代码转换为广泛支持的ES5。`.eslintrc`则是ESLint的配置文件,用于设定代码风格规则。`package.json`文件则包含了项目的元数据,包括依赖包、脚本命令等。 ...

    babel-simple-skeleton

    Babel 是一个广泛使用的 JavaScript 编译器,它允许开发者使用最新版本的 JavaScript(如 ES6、ES7 等)特性,然后将其转换为当前浏览器广泛支持的 ES5 版本。 **描述分析:**描述中的 "$ npm install" 命令指示...

    Looper 后台管理框架

    `.babelrc` 文件是Babel配置文件,用于设置转码规则和插件,确保项目能使用最新的JavaScript语法(如ES6、ES7等),并在各种浏览器环境中兼容运行。 `.bowerrc` 是Bower配置文件,Bower是一个前端包管理工具,它...

    babel_browserify_practice

    5. **Gulp/Grunt或Webpack集成**:尽管题目没有明确指出,但通常在实际项目中,Babel和Browserify会与构建工具如Gulp或Grunt配合使用,或替换为更全面的工具如Webpack。 6. **CommonJS和模块化**:了解Node.js中的...

    use-babel:babel练习项目

    Babel是一个广泛使用的转码器,它的核心功能是将ES6+的语法特性转换为ES5,确保代码在大部分浏览器中能够正常运行。随着JavaScript语言的不断演进,诸如箭头函数、模板字符串、类和模块等新特性应运而生,但并非所有...

    react-isomorphic-starter:React同构入门模板

    `react-isomorphic-starter`使用Gulp作为构建工具,你可以通过以下命令进行开发和生产环境的运行: 1. **开发模式**:运行`gulp dev`,此模式下会开启一个热重载的服务器,方便你在开发过程中实时预览和调试代码。 ...

    test-code-build

    - **Babel**:JavaScript转码器,将ES6+新特性转换为兼容旧浏览器的代码。 4. **项目结构**: - **模块化**:通过CommonJS、ES modules等方式组织代码,提高代码复用和维护性。 - **工程目录结构**:通常包括src...

    Node-NPM-stuff:Node,npm其他类似技术的相关项目

    6. **Babel**:JavaScript转码器,将ES6+代码转换为兼容现有浏览器的ES5代码。 7. **TypeScript**:JavaScript的超集,添加了类型系统和对ES6+特性的支持,有助于写出更健壮的代码。 8. **Jest**:JavaScript测试...

Global site tag (gtag.js) - Google Analytics