脚本宝典收集整理的这篇文章主要介绍了搭建一个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文件。
大致的文件目录结构,如图:
编写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代码
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;
具体代码可以参考我的github,https://github.com/IOJINDD/ES...
以上是脚本宝典为你收集整理的搭建一个ES6的运行环境全部内容,希望文章能够帮你解决搭建一个ES6的运行环境所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。