搭建一个ES6的运行环境

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了搭建一个ES6的运行环境脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

如今ES6已经发布了有一段时间了,很多人学了ES6但是却没运行环境,今天有空就写了一个 可以运行ES6的运行环境。

配置node+npm

首先机子上一定得安装node+npm,具体怎么安装应该了解的,这里就不重复多讲了

文件目录

安装完node+npm之后,在新建的项目里 输入

 npm inIT -yes

自动生成package.JSON 文件,然后添加依赖的开发包,具体如下:

  "devDePEndencies": {
    "babel-polyfill": "^6.9.1",
    "babel-PReset-es2015": "^6.6.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-browserify": "^0.5.1",
    "gulp-connect": "^3.2.3",
    "gulp-rename": "^1.2.2",
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "^1.5.3"
  }

然后新建一个app文件夹,在文件里在新建一个写ES6的文件夹,然后就可以再里面写ES6的文件了,可以以.js结尾也可以以.es6结尾。
写完js文件之后,就开始编写gulpfile.js 文件了,在app文件夹的同一个目录下新建一个gulpfile.js文件。
大致的文件目录结构,如图:

搭建一个ES6的运行环境

编写gulp文件

VAR gulp = require('gulp'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    browserify = require('gulp-browserify'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    gulpsync = require('gulp-sync')(gulp);

// 定义解析es6的任务
gulp.task('compile-es6', function() {
  return gulp.src('app/es6/*')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('app/js'));
});

// 将解析出来的js打包
gulp.task('pack-js', function() {
  return gulp.src('app/js/main.js')
    .pipe(browserify())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest('app/bundle'));
});

// 定义监听任务
gulp.task('watch', function () {
  gulp.watch('./app/es6/*', gulpsync.sync(['compile-es6', 'pack-js']));
})

//启动服务端口3000
gulp.task('server', gulpsync.sync(['compile-es6', 'pack-js', 'watch']), function() {
  connect.server({
    root: 'app',
    port: 3000,
    livereload: true
  });
});

编写ES6代码

main.es6

import {greet} From './hello';

greet('ES6').then((res) => {
    document.getElementById('content').innerHTML += res;
});

hello.es6

function greet(name) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello ' + name);
        }, 1000);
    });
}

exports.greet = greet;

具体代码可以参考我的githubhttps://github.com/IOJINDD/ES...

脚本宝典总结

以上是脚本宝典为你收集整理的搭建一个ES6的运行环境全部内容,希望文章能够帮你解决搭建一个ES6的运行环境所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。