gulp与webpack
gulp是对文件的处理,是Task Runner,节省了手动编译,手动打包这一步,但是单纯使用gulp没法去解决js中引入module的问题,可能会遇到项目中明明引入了babel语法转换,为什么浏览器会提示require is not defined
报错,这是因为babel只解析语法,并不会去管js的模块引入。
而webpack解决了require的问题,根据不同的文件转换需求引入不同的loader,最后打包出符合相应规则的静态资源文件。
Browserify-让浏览器加载Node模块
官方文档开头介绍:require('modules') in the browser
目前NPM的包大多都是通过CMD的方式打包的,除了特定的可以使用CMD模块加载器加载的模块,大部分nodejs模块无法直接使用到浏览器环境中。
Browserify是一个供浏览器环境使用的模块打包工具,像在node环境一样,也是通过require(‘modules’)来组织模块之间的引用和依赖,既可以引用npm中的模块,也可以引用自己写的模块,然后打包成js文件,再在页面中通过<script>
标签加载。
Browserify.transform
指定转换模块,在打包过程中自动执行,在这里需要结合babel进行语法转换
详细配置
react语法解析主要用到babel的@babel/preset-react
插件,此外还会使用到browserSync
进行自动检测刷新,less
预处理
1 | const gulp = require('gulp') //引入gulp |