构建工具的选择
nimoc opened this issue · comments
构建项目中的 js 文件最优秀的是 webpack。webpack-book
开源项目还可以选用 rollup
- webpack 热更新最快的方式是单独启动一个服务器加上 webpack-hot-middleware
- 项目中有多个入口,即多个单页引用。同时需要支持热更新。可通过开发时单个入口dev.js最终构建时配置多个入口]的方式解决。
- 如果要兼容IE8请参考 support-ie8
fis3 构建非JS文件非常优秀,关键是它对于文件指纹做的非常好。但是也还是有些小问题,不过都能自己动手解决。
1、 fis3 livereload 有时会报错,并且不支持 css 热更新(编译css后不刷新页面更新样式)。 可以自己增加 livereload 解决
3、 JS方面的编译全部交给 webpack。fis3不编译 js 时会遇到开发阶段 js 被 release:false
禁用后无法引用的问题。利用 jdists区分开发编译和发布编译,利用 document.createElement
防止 release:false
导致的报错。
当 js 文件被
release:false
后直接引用<script src="/dev.js" ></script>
<!--jdists trigger="dev" >
<script>
!(function(){
var devjsNode = document.createElement('scr'+'ipt')
devjsNode.setAttribute('src', '/dev.js')
document.body.append(devjsNode)
})()
</script>
</jdists-->
<!--jdists trigger="online" >
<script src="./externals-entry.js" ></script>
<script src="./entry.js" ></script>
</jdists-->
4、 @import "/path/some.less";
这种绝对路径的语法不要用,因为只在 fis3 中有效,其他 webpack less-loader 不支持。
gulp 用户最多的构建系统,非常优秀。在文件指纹问题上没有 fis3 做的优秀,因为文件指纹还是建议使用 fis3。
gulp 入门指南,这本书是作者多年前写的,但是作者现在还是选择用 fis3。
grunt 已经停止维护了,而且他的构建方式不能满足复杂的构建需求。不要去了解,更不用学习如何使用。