browserify babel gulp 没有编译import的文件
1.遇到坑的gulp配置:
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('./es/index.js')
.pipe(SourceMap.init())
.pipe(babel({
babelrc: false,
plugins: ['transform-es2015-modules-commonjs']
}))
.pipe(browserify({
insertGlobals: true,
debug: !gulp.env.production
}))
.pipe(envify(environment))
.pipe(uglify())
.pipe(SourceMap.write('.'))
.pipe(gulp.dest('js'))
}); gulp.task('default', () => {
return watch('./es/*.js', function() {
gulp.run('react');
});
});
今天我遇到了这个问题,babel运行了先把es6文件编译,然后交给browserify 处理import的文件,可是报错了,因为先用babel编译es6文件后,import export 编译成了require module exports 这类,这样browserify就可以识别,然后browserify就会导入这些import的文件,然后打包进去到js文件里面。可是回到babel编译上,有一个问题是babel没有把import的文件也给编译了,因为babel不能导入import文件来处理,babel只是编译了es6代码,并不进行import的文件的打包处理,所以import的文件就没有被babel编译,然后交给browserify处理后,会出现import文件里的es6语法没有被编译。
这时候解决思路就是再babel编译一遍经过babel->browserify后的文件,也就是babel->browserify->babel,这样import的文件也会被编译成es6语法,不过babel->browserify过程 import自己写的文件需要用require方式导入,export也是需要exports方式导出,这样browserify才能识别,因为browserify不认识import文件里的import类语法。
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('./es/index.js')
.pipe(SourceMap.init())
.pipe(babel({
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy']
})) //编译es6文件
.pipe(browserify({
insertGlobals: true,
debug: !gulp.env.production
})) //打包require文件到js包里面
.pipe(babel({
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy']
})) //再编译一次require文件里的es6语法
.pipe(envify(environment))
.pipe(uglify())
.pipe(SourceMap.write('.'))
.pipe(gulp.dest('js'))
}); gulp.task('default', () => {
return watch('./es/*.js', function() {
gulp.run('react');
});
});
2.优化gulp配置:
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('./es/index.js')
.pipe(SourceMap.init())
.pipe(babel({
babelrc: false,
plugins: ['transform-es2015-modules-commonjs']
})) //这里只需要把import export 编译成commonjs规范即可,这样browserify就可以识别了
.pipe(browserify({
insertGlobals: true,
debug: !gulp.env.production
}))
.pipe(babel({
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
plugins: ['transform-decorators-legacy']
})) //最终这里再把js文件中所有的es6语法编译成es5语法
.pipe(envify(environment))
.pipe(uglify())
.pipe(SourceMap.write('.'))
.pipe(gulp.dest('js'))
}); gulp.task('default', () => {
return watch('./es/*.js', function() {
gulp.run('react');
});
});
browserify babel gulp 没有编译import的文件的更多相关文章
- 模块之字节编译的.pyc文件---from.import语句
字节编译的.pyc文件输入一个模块相对来说是一个比较费时的事情,所以Python做了一些技巧,以便使输入模块更加快一些.一种方法是创建 字节编译的文件 ,这些文件以.pyc作为扩展名.字节编译的文件与 ...
- gulp实时编译less,压缩合并requirejs模块文件
gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...
- 用gulp把less文件编译成css文件
第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <htm ...
- 何为babel / gulp
Babel主要用来将新版本的javascript(ES6,ES7)编译为ES5,目前它对于新标准的支持程度甚至高于Chrome浏览器.通过引入预设babel-preset-react,babel还能解 ...
- gulp 搭建个人工作流:文件注入、热启动、跨域
个人比价推崇前后端分离的开发方式,大家伙各司其职,只需通过 API 进行交流,不仅避免了沟通上的成本,更提升了开发效率.而在前端开发工作中,许多需求和问题是相似的,所以我们的开发模式往往是雷同的,是否 ...
- 编译PCL Tutorial文件
1.PCL Tutorial是使用SPHINX编译而成的. 2.安装Python2.7,从官方网站上下载(Portable Python测试未成功,待研究). 3.安装setuptools,安装成功会 ...
- Mac上把python源文件编译成so文件
把python源文件编译成so文件 前言 实际上属于一种代码混淆/加密的技术,大家知道python的源文件放在那里,大家是都可以看的,不像C语言编译出来可以拿编译后的东西去运行,所以就出现了这种需求. ...
- Golang 编译成 DLL 文件
golang 编译 dll 过程中需要用到 gcc,所以先安装 MinGW. windows 64 位系统应下载 MinGW 的 64 位版本: https://sourceforge.net/pro ...
- 第48章 MDK的编译过程及文件类型全解—零死角玩转STM32-F429系列
第48章 MDK的编译过程及文件类型全解 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.co ...
随机推荐
- 拷贝某个区间(copy,copy_back)
copy 为outputIterator中的元素赋值而不是产生新的元素,所以outputIterator不能是空的 如要元素安插序列,使用insert成员函数或使用copy搭配insert_itera ...
- quartz.net实现集群部署的笔记
一..表信息 QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron Trigger,包括Cron表达式和 ...
- asyn proposals
Objective:
- Mysql5.6 for Centos6.5源码编译安装
## 说明 不同服务器需要改变 server_id ,同一台机器上需要改变 port 1. 关闭防火墙[root@mysql ~]# service iptables status --查看防火墙状态 ...
- MD5 SHA1 SHA256 SHA512 SHA1WithRSA 的区别
MD5 SHA1 SHA256 SHA512 这4种本质都是摘要函数,不通在于长度 MD5 是 128 位,SHA1 是 160 位 ,SHA256 是 256 位,SHA512 是512 位. ...
- 利用JavaFx开发RIA桌面应用-事件监听
1 事件监听 最近利用javaFX开发桌面客户端,碰到需要给各种UI控件添加事件监听,在这里做一个简单的小结,供日后参考. 2 分类处理 在JavaGUI 和Android中,事件通常通过实现list ...
- mysql官方测试 DB
https://dev.mysql.com/doc/employee/en/ http://blog.51cto.com/dnsliu/ http://blog.csdn.net/zengxuewen ...
- 代码编辑器之EditPlus
引用及下载地址:http://www.iplaysoft.com/editplus.html EditPlus是一套功能非常强大的文字编辑器,拥有无限制的Undo/Redo(撤销).英文拼字检查.自动 ...
- RGB颜色空间、HSV颜色空间的理解
HSV是把H(色相),S(饱和度),V(亮度)当做色值来定位颜色的空间. 1.HSV模型 色相:取值范围是0~360度,用来表示颜色的类别.其中红色是0度,绿色是120度,蓝色是240度.饱和度:取值 ...
- 跟着未名学 - 免费录屏工具ActivePresenter
目录 简介... 1 录制屏幕... 1 编辑... 3 幻灯片... 3 时间轴... 4 对像... 4 导出视频... 4 未名 2017-7-17 简介 ActivePresenter 个人免 ...