首页 > 代码库 > gulp 编译es6 react 教程 案例 配置
gulp 编译es6 react 教程 案例 配置
1.gulp基本配置:
var gulp = require(‘gulp‘), watch = require(‘gulp-watch‘), babel = require(‘gulp-babel‘); var browserify = require(‘gulp-browserify‘); var SourceMap = require(‘gulp-sourcemaps‘); var SourceMapSupport = require(‘gulp-sourcemaps-support‘); gulp.task(‘react‘, () => { gulp.src(‘index.js‘) .pipe(SourceMap.init()) //sourcemap只是为了生成代码资源的map .pipe(babel({ presets: [‘es2015‘, ‘es2016‘, ‘es2017‘, ‘stage-0‘, ‘react‘], plugins: [‘transform-decorators-legacy‘] })) //这里编译es6代码,包括编译react模板 .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production })) //browserify 的作用就是把require资源从node_modules 里拿出来,然后打包进去到输出的js,如果没有这个插件,那么你不能看到import进来的东西,import的东西没有被打包进去 .pipe(SourceMap.write(‘.‘)) .pipe(gulp.dest(‘build‘)) }); gulp.task(‘default‘, () => { return watch(‘./index.js‘, function() { gulp.run(‘react‘); }); });
2.优化
var gulp = require(‘gulp‘), watch = require(‘gulp-watch‘), babel = require(‘gulp-babel‘); var envify = require(‘gulp-envify‘); var browserify = require(‘gulp-browserify‘); var SourceMap = require(‘gulp-sourcemaps‘); var uglify = require(‘gulp-uglifyjs‘); var SourceMapSupport = require(‘gulp-sourcemaps-support‘); gulp.task(‘react‘, () => { var environment = { NODE_ENV: ‘production‘ }; gulp.src(‘index.js‘) .pipe(SourceMap.init()) .pipe(babel({ presets: [‘es2015‘, ‘es2016‘, ‘es2017‘, ‘stage-0‘, ‘react‘], plugins: [‘transform-decorators-legacy‘] })) .pipe(browserify({ insertGlobals: true, debug: !gulp.env.production, transformKey: ‘production‘ })) .pipe(envify(environment)) //加入这个插件可以修改代码中的环境等于production .pipe(uglify()) .pipe(SourceMap.write(‘.‘)) .pipe(gulp.dest(‘build‘)) }); gulp.task(‘default‘, () => { return watch(‘./index.js‘, function() { gulp.run(‘react‘); }); });
gulp 编译es6 react 教程 案例 配置
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。