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')

var vendors = ['react','react-dom','jquery'];//定义不打包到js文件中的模块，或者vender公共模块

gulp.task('es2015', () => {

	browserify({

			entries: ['./src/main.js'],

			extensions: ['.js', '.jsx'],

			debug: true

		})

		.external(vendors) //这个功能就是排除打包某些模块的

		.transform(["babelify", {

			babelrc: false,

			presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],

			plugins: ['transform-decorators-legacy']

		}])

		.bundle()

		.pipe(fs.createWriteStream("bundle.js"));

})

gulp.task('vender', () => {

	var bf = browserify({

		debug: true

	});

	vendors.forEach(lib => {

		bf.require(lib);  //这里require公共模块，下面将额外打包vender的模块

	});

	bf.transform(["babelify", {

			babelrc: false,

			presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],

			plugins: ['transform-decorators-legacy']

		}])

		.bundle()

		.pipe(fs.createWriteStream("vender.js"));

})

gulp.task('uglifyjs', () => {

	gulp.src('./bundle.js')

		.pipe(uglifyjs())

		.pipe(rename('bundle.min.js'))

		.pipe(gulp.dest('./dist'))

})

gulp.task('default', () => {

	gulp.run('vender');

	gulp.watch('./src/**/*.js', () => {

		gulp.run('es2015')

	})

})

　　browserify 不打包某些文件或者把公共文件提取出来

　　这里重点的方法就是external，至于写法就按上面那样。

另外，你要让没打包那些模块的程序能够正常运行，就需要额外打包一个公共模块的js文件。或者你在程序中不要import模块，直接接口用着，这样你额外再链接进来那个插件也可以使用。

比如：

$(()=>{

	console.log('start===')

})

　　$ 是jquery接口，和jquery接口一模一样，这样你依然可以在有链接入jquery插件的文档里正常运行程序。

<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

<div id="app"></div>

</body>

<!-- <script type="text/javascript" src='./vender.js'></script>

<script type="text/javascript">

	var $=require('jquery');

	$(function(){

		console.log('jjjjj')

	})

</script> -->

<script type="text/javascript" src='./dist/jquery.min.js'></script>//jquery插件，确保$接口可以正常使用

<script type="text/javascript" src='./bundle.js'></script>  //bundle.js 里面没有import jquery ，这样还是依然可以使用jquery的接口，和正常运行

</html>

　　

browserify 不打包某些文件或者把公共文件提取出来教程的更多相关文章

  1. 公共文件模块include

    首先新建一个include 把所有引入的文件放入公共文件里 function getBaseURL() { var pathName = window.document.location.pathna ...

  2. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  3. webpack 打包出多个HTML文件，多个js文件，图片文件放置到指定文件夹中

    一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...

  4. php读取excel，以及php打包文件夹为zip文件

    1.把文件下载到本地,放在在Apache环境下2.d.xlsx是某游戏的服务器名和玩家列表,本程序只适合此种xlsx文件结构,其他结构请修改index.php源码3.访问zip.php的功能是把生成的 ...

  5. 【转】打包AAC码流到FLV文件

    AAC编码后数据打包到FLV很简单.1. FLV音频Tag格式                              字节位置    意义0x08,                         ...

  6. m文件转换为C/C++文件的编译、绘图、参数、打包问题总结

    在工程计算相关项目中,常常利用Matlab来完成计算.算法.绘图等功能.使用Matlab来完成这些功能非常简单,Matlab提供的m编程语言功能强大,代码量少.为了在自己的C/C++项目中加入这些功能 ...

  7. thinkphp 的两种建构模式 第一种一个单入口里面定义两个模块，前台和后台，函数控制模块必须function.php前台加载前台模块的汉书配置文件，后台加载后台模块的汉书配置文件，公共文件共用。第二种架构模式两个单入口文件，分别生成两个应用定义define。。。函数可以定义配置文件。。。。

    thinkphp 的两种建构模式  第一种一个单入口里面定义两个模块,前台和后台,函数控制模块必须function.php前台加载前台模块的汉书配置文件,后台加载后台模块的汉书配置文件,公共文件共用. ...

  8. maven项目打包的时候，*Mapper.xml 文件会打不不进去解决办法

    打包的时候,不同版本的 Eclipse 还有IDEA 会有打包打不进去Mapper.xml 文件,这个时候要加如下代码, 在<build> 标签内加入即可 <resources> ...

  9. [InstFiles]在Inno中打包隐藏和系统文件的头文件

    本文来自:http://www.kngstr.com 简介: 一直以来,Inno的作者都没有提供打包隐藏文件和系统文件的功能. 但是,如果我们做批量打包,批量封装的时候,总会需要这样的功能,因为我们不 ...

随机推荐

  1. DevExpress控件使用方法：第二篇 barManager

    标题栏 一.Bars 1.   把BarManager组件添加到窗体中后,会自动创建三个空的 bars: 主菜单(通常位于窗体顶部).顶部工具栏.窗体底部的状态栏. 2.   隐藏左侧的竖线和右边的箭 ...

  2. 图像识别的前期工作——使用pillow进行图像处理

    pillow是个很好用的python图像处理库,可以到官方网站下载最新的文件.如果官网的任何PIL版本都不能与自己的python版本对应,或安装成功后发现运行出错,可以尝试从一个非官方的whl网站下载 ...

  3. JAVA中通过Hibernate-Validation进行参数验证

    在开发JAVA服务器端代码时,我们会遇到对外部传来的参数合法性进行验证,而hibernate-validator提供了一些常用的参数校验注解,我们可以拿来使用.1.maven中引入hibernate- ...

  4. MySQL5.6新特性之Multi-Range Read

    一 介绍    MySQL 5.6版本提供了很多性能优化的特性,其中之一就是 Multi-Range Read 多范围读(MRR) , 它的作用针对基于辅助/第二索引的查询,减少随机IO,并且将随机I ...

  5. React 使用 PropTypes 进行类型检查

    注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. defaultProps 用来确保 this.props.name 在父组件没有特 ...

  6. 高级OPENGL, 利用uniform块接口

    1.找到需要的uniform块的索引, 将程序对象的该uniform块索引绑定uniform 缓冲对象的绑定点 2.建立uniform缓冲对象,对象绑定GL_UNIFORM_BUFFER缓冲目标,为缓 ...

  7. EnvironmentError: mysql_config not found问题解决(centos7下python安装mysql-python)

    centos7下python安装mysql-python模块,执行命令: pip install mysql-python 出现报错:EnvironmentError: mysql_config no ...

  8. DelphiXE7 Datasnap TDSClientCallbackChannelManager内部实现初探

    回调的原理很简单,开一个线程(为了区别其它线程,先将此线程命名为“通道线程”),注册一个“轻量”的回调,然后此线程(通道线程)等服务器返回信息(回调),服务器有信息返回时,通道线程再开个线程执行用户注 ...

  9. Hive DDL及DML操作

    一.修改表 增加/删除分区 语法结构 ALTER TABLE table_name ADD [IF NOT EXISTS] partition_spec [ LOCATION 'location1' ...

  10. skype在线状态代码详解

    前不久微软宣布了MSN并入skype的消息,这么一来面向海外客户的同学除了选择客服系统之外,在页面上添加一个skype聊天按钮也是很不错的噢,它添加方便.功能强大.而且可以判断出客户是否安装了skyp ...