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. ASP.NET Core WebApi使用Swagger生成api说明文档

    1. Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件 ...

  2. 目前支持WebGL的浏览器有哪些?

    Google Chrome 9+ Mozilla Firefox 4+ Safari 5.1+(仅限于Mac OS X操作系统,不包括Windows) Opera 12 alpha及以上版本 IE9+ ...

  3. oracle-pl/sql之一

    http://www.cnblogs.com/huyong/archive/2011/05/10/2041951.html#_Toc15837 SQL语言只是访问.操作数据库的语言,并不是一种具有流程 ...

  4. oracle-sql优化器

    优化器optimizer Oracle 执行计划(Explain Plan) 说明 http://langgufu.iteye.com/blog/2158163 explain plan是一个dml语 ...

  5. 深入详解美团点评CAT跨语言服务监控(六)消息分析器与报表(一)

    大众点评CAT微服务监控架构对于消息的具体处理,是由消息分析器完成的,消息分析器会轮训读取PeriodTask中队列的消息来处理,一共有12类消息分析器,处理后的结果就是生成各类报表. 消息分析器的构 ...

  6. C#_从DataTable中检索信息

    C#_从DataTable中检索信息 存在于内存中的虚拟表DataTable,绑定在数据显示控件后,如果想在再检索其中某些信息,可以利用DataTable.Select方法进行检索,避免了重复的读取数 ...

  7. 使用http-server创建本地服务

    在很多情况下, 都需要开启本地http服务器来测试, 所以就需要一个简单省事的http服务器, , 以前的时候可以使用express或者webpack-dev-server来启动一个服务, 这未免有点 ...

  8. pycharm Process finished with exit code (0xC0000005)

    pycharm  Process finished with exit code  (0xC0000005)解决办法 上次报过这个错误,是在安装浏览器时发现的,报过同样的错误.按当时的方法,以为切地解 ...

  9. python初始化list列表(1维、2维)

    1.初始化递增的list: list1 = range(10)#print list1#[0,1,2,...,9] 2.初始化每项为0的一维数组: list2 = [0] * 5#print list ...

  10. C# 使用委托实现多线程调用窗体的四种方式(转)

    1.方法一:使用线程 功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线程,如果不采用多线程控制进度条,窗口 ...