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 ...
随机推荐
- 机器学习 - 开发环境安装pycharm + pyspark + spark集成篇
AS WE ALL KNOW,学机器学习的一般都是从python+sklearn开始学,适用于数据量不大的场景(这里就别计较“不大”具体指标是啥了,哈哈) 数据量大了,就需要用到其他技术了,如:spa ...
- JAVA中通过Hibernate-Validation进行参数验证
在开发JAVA服务器端代码时,我们会遇到对外部传来的参数合法性进行验证,而hibernate-validator提供了一些常用的参数校验注解,我们可以拿来使用.1.maven中引入hibernate- ...
- idea的svn安装
https://blog.csdn.net/qq_27093465/article/details/74898489
- django用mysql数据库出现的问题解决
blog添加不了文章!! 做了个程序,将数据库迁移到服务器之后,发现一个奇怪的错误.Field 'id' doesn't have a default value.查看了一下,程序是没问题的,但是这是 ...
- PHP实现IP访问限制及提交次数的方法详解
一.原理 提交次数是肯定要往数据库里写次数这个数据的,比如用户登陆,当用户出错时就忘数据库写入出错次数1,并且出错时间,再出错写2,当满比如5次时提示不允许再登陆,请明天再试,然后用DateDiff计 ...
- TP5 中引入第三方类库
通过了解tp5的目录结构,我们知道其中有两个目录是纺织扩展类库文件的. extend是放置自定义或者其他类文件的. vendor目录是放置composer类库文件的. 当我们的第三方类库文件是下载的, ...
- Maven 环境隔离实践
现在将SpringMVC中Maven环境隔离实践总结如下: 1. 在pom中配置 <resources> <resource> <directory>src/mai ...
- new和delete重载
1. 简介 new/delete关键字,其本质是预定义的操作符,因此支持重载 默认new和delete的行为: new: ①获取内存空间(默认为堆空间):②在获取的空间中调用构造函数创建对象 d ...
- MobaXterm的一些介绍(Top 5 SSH Clients for Windows (Alternatives of PuTTY))
Top 5 SSH Clients for Windows (Alternatives of PuTTY) http://tecadmin.net/top-5-ssh-clients-for-wind ...
- 获取 TUniConnection.SpecificOptions默认值和下拉框列表值
TUniConnection的SpecificOptions参数决定了数据库连接配置参数,但可惜的是,SpecificOptions设计器界面,Devart公司只能让它在设计期配置! Specific ...