1. var gulp = require('gulp')
  2. var fs = require("fs")
  3. var babelify = require('babelify')
  4. var browserify = require('browserify')
  5. var rename = require('gulp-rename')
  6. var uglifyjs = require('gulp-uglifyjs')
  7.  
  8. var vendors = ['react','react-dom','jquery'];//定义不打包到js文件中的模块，或者vender公共模块
  9.  
  10. gulp.task('es2015', () => {
  11. 	browserify({
  12. 			entries: ['./src/main.js'],
  13. 			extensions: ['.js', '.jsx'],
  14. 			debug: true
  15. 		})
  16. 		.external(vendors) //这个功能就是排除打包某些模块的
  17. 		.transform(["babelify", {
  18. 			babelrc: false,
  19. 			presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
  20. 			plugins: ['transform-decorators-legacy']
  21. 		}])
  22. 		.bundle()
  23. 		.pipe(fs.createWriteStream("bundle.js"));
  24. })
  25. gulp.task('vender', () => {
  26. 	var bf = browserify({
  27. 		debug: true
  28. 	});
  29. 	vendors.forEach(lib => {
  30. 		bf.require(lib);  //这里require公共模块，下面将额外打包vender的模块
  31. 	});
  32. 	bf.transform(["babelify", {
  33. 			babelrc: false,
  34. 			presets: ['es2015', 'es2016', 'es2017', 'stage-0', 'react'],
  35. 			plugins: ['transform-decorators-legacy']
  36. 		}])
  37. 		.bundle()
  38. 		.pipe(fs.createWriteStream("vender.js"));
  39. })
  40. gulp.task('uglifyjs', () => {
  41. 	gulp.src('./bundle.js')
  42. 		.pipe(uglifyjs())
  43. 		.pipe(rename('bundle.min.js'))
  44. 		.pipe(gulp.dest('./dist'))
  45. })
  46. gulp.task('default', () => {
  47. 	gulp.run('vender');
  48. 	gulp.watch('./src/**/*.js', () => {
  49. 		gulp.run('es2015')
  50. 	})
  51. })

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

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

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

比如：

  1. $(()=>{
  2. 	console.log('start===')
  3. })

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5. </head>
  6. <body>
  7. <div id="app"></div>
  8. </body>
  9. <!-- <script type="text/javascript" src='./vender.js'></script>
  10. <script type="text/javascript">
  11. 	var $=require('jquery');
  12. 	$(function(){
  13. 		console.log('jjjjj')
  14. 	})
  15. </script> -->
  16. <script type="text/javascript" src='./dist/jquery.min.js'></script>//jquery插件，确保$接口可以正常使用
  17. <script type="text/javascript" src='./bundle.js'></script>  //bundle.js 里面没有import jquery ，这样还是依然可以使用jquery的接口，和正常运行
  18. </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. Oracle12C版本安装步骤

    一.下载路径 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html file1,file ...

  2. http笔记汇总

    网上笔记参考: https://juejin.im/post/5b34e6ba51882574d20bbdd4#heading-8 http://dy.163.com/v2/article/detai ...

  3. .Net Core 应用方向 图谱

    .Net Core 应用方向 图谱,  如下图 : 大规模并行计算 是 大数据 和 人工智能 的 基础, 是 未来 大计算能力 的 基础, 网格计算 是 未来 大计算能力 的 一个 分支 . 所以, ...

  4. COLUMN_FORMAT 的值：FIXED、DYNAMIC、DEFAULT 的区别（待补充）

    参考===MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_ ...

  5. Jmeter录制脚本过程及Could not create script recorder报错、您的连接不是私密连接报错

    转载自    https://www.cnblogs.com/wwho/p/7173172.html Jmeter录制脚本过程及Could not create script recorder报错.您 ...

  6. Linux系统下启动tomcat报错【java.util.prefs.BackingStoreException: Couldn't get file lock】的解决方法

    Linux环境下,启动tomcat报出如题的警告信息,虽然对系统正常使用没有多大影响,但是会导致tomcat的日志垃圾信息很多,而且看起来很不爽... 具体的警告信息如下: Jan , :: PM j ...

  7. Usbhub驱动编译

    在3g 4g的usb驱动基础上,加入以下部分,就可以驱动hub了 kmod-usb-hid 3.3.8-1 kmod-usbip 3.3.8-1 kmod-usbip-client 3.3.8-1 k ...

  8. XE5开发Android程序调用电话相关功能(短信息和电话)

    方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: uses Androidapi.JNI.JavaTypes,Androidapi.JNI.Telepho ...

  9. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  10. 开发人员行走Unix的随身四艺

    Unix系统永远只会越来越多,开发人员就没必要特意学习它们的安装.配置和管理了,就全部交给集成人员吧.     但开发人员行走于Unix之间,依然有四样东西要熟练. 一.VI     虽然Unix上的 ...