gulp 编译es6 探究

最新推荐文章于 2022-03-30 18:18:13 发布

weixin_30340775

最新推荐文章于 2022-03-30 18:18:13 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jocongmin/p/6714992.html

本文介绍了一种使用Gulp自动化任务运行器配合Babel和Browserify进行ES6代码转换和模块打包的方法。通过配置Gulp任务，可以实现对ES6语法的自动编译，并利用Browserify进行模块化打包，最终通过UglifyJS进行压缩优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.gulp配置：

var gulp = require('gulp')
var fs = require("fs")
var babelify = require('babelify')
var browserify = require('browserify')
var rename=require('gulp-rename')
var uglifyjs = require('gulp-uglifyjs')

gulp.task('es2015', () => {
	browserify("./src/main.js")
		.transform(["babelify", {
			babelrc: false,
			presets: ['es2015', 'es2016', 'es2017', 'stage-0'],
			plugins: ['transform-decorators-legacy']
		}])
		.bundle()
		.pipe(fs.createWriteStream("bundle.js"));
})
gulp.task('uglifyjs',()=>{
	gulp.src('./bundle.js')
		.pipe(uglifyjs())
		.pipe(rename('bundle.min.js'))
		.pipe(gulp.dest('./dist'))
})
gulp.task('default', () => {
	gulp.watch('./src/**/*.js', () => {
		gulp.run('es2015')
	})
})

　　　这里编译es6的要点工具是babel和browserify，browserify是一个打包module模块的工具，能够将import之类的module打包进来到文件中。另外browserify还配置了babel模块来编译es6，这样就可以高度实现对es6的编译和打包。

转载于:https://www.cnblogs.com/jocongmin/p/6714992.html