前端构建东西整顿

2019年8月22日 209次阅读 来源: 安歌

前文

端手艺局限不断生长，前端开辟不仅限于直接编写html，css和javascript，Web运用日趋巨大，代码也越发巨大，因而许多新的头脑（比方模块化和工程化等）和框架（React和Vue等），以及新的言语（Es6 TypeScript）随之涌现，而构建东西则负担起了中心的桥梁作用。

正文

构建东西最直接的作用是：将源码转换成可实行的js,css和html，详细包含:

  • 代码转换:ts->js,scss->css
  • 文件优化:紧缩js,css,html，紧缩兼并图片等
  • 代码支解：提取大众代码。
  • 模块兼并：将模块化里的多个模块和文件兼并到一个文件
  • 自动革新：监听当地代码，自动从新构建，革新浏览器。（热重载）
  • 代码校验：代码被提交到堆栈前须要校验范例
  • 自动宣布：更新代码后，自动构建出线上宣布代码，传输给宣布体系

构建实际上是工程化和自动化头脑的再前端的表现：将一系列流程用代码自动去完成，解放生产力。

罕见前端构建东西的分类和对照

1. Npm Script

npm是nodejs附带的包治理器，npm script是npm内置的一个功用，许可在package.json文件内里运用script字段定义使命：

{
    "scripts":{
        "dev":"node dev.js",
        "pub":"node build.js"
    }
}

在这里，一个属性对应一段shell剧本，道理是经由过程挪用shell去运转剧本敕令。

长处

  • 内置，无需装置其他依靠

瑕玷

  • 功用简朴，不轻易治理多个使命依靠

2. Grunt

  • Grunt与npm script相似，也是经由过程shell运转剧本敕令。
  • Grunt与大批封装好的插件，能够用于罕见使命，也能治理使命之间的依靠。
  • grunt的详细实行代码和依靠关联写在设置文件的里,比方：
module.exports = function(grunt){
    //插件的设置信息
    grunt.initConfig({
        uglify:{
            app_task:{
                files:{
                    'build/app.min.js':['lib/index.js','lib/test.js']
                }
            }
        }
    })
    ...
}

长处

  • 天真，只实行我们定义的使命
  • 有大批现成的插件

瑕玷

  • 集成度不高，须要些大批设置
  • 相当于进阶版npm script

3. Gulp

基于流的自动化构建东西。除了能够治理和实行使命，还支撑监听读写文件。简朴例子：

var gulp = require('gulp');     //援用基础模块
var uglify = require('gulp-uglify');    //js紧缩模块

gulp.task('script',function(){  //启动使命script
  gulp.src('js/*.js')           //找到文件
  .pipe(uglify())               //紧缩文件
  .pipe(gulp.dest('dist/js'))   //另存紧缩文件
});
//监听
gulp.task('auto',function () {
  gulp.watch('js/*.js',['script']);     //监听script使命
  gulp.watch('css/*.css',['css']);      //监听css使命
  gulp.watch('images/*.*',['images']);  //监听images使命
})；

长处

  • 天真，可零丁运用也可搭配其他东西
  • 集成度不高

瑕玷

  • 加强版Grunt，增添文件监听，文件读写，流式处置惩罚使命
  • 相当于进阶版npm script

4. fis3

fis3相对于前面的东西，集成了Web开辟中经常使用的构建功用：

  • 资本定位：星散开辟途径与布置途径之间的关联，工程师只须要运用相对途径来定位本身的开辟资本，代码轻易移植
  • 文件指纹：输出文件时，为文件url+md5戳，优化缓存
  • 文件编译：经由过程parser设置文件解析器做文件转换
  • 紧缩资本：在文件中经由过程match设置紧缩器，完成前端工程优化
  • 图片兼并：CssSprite(雪碧图)设置，兼并多个css导入的图片到一个图片，削减http要求

长处

  • 天真，只实行我们定义的使命
  • 有大批现成的插件

瑕玷

  • 集成了Web开辟中经常使用的构建功用，设置简朴，开箱即用
  • 官方不再保护和更新，不支撑最新版本的node.js
  • 是一个专注于web开辟的完整解决方案

5. Webpack

webpack是一个打包模块化js的东西，在webpack里，统统文件都是模块，经由过程Loader转换文件，经由过程plugin注入钩子，末了输出由多个模块构成的文件。webpack专注于构建模块化项目。

长处

  • 专注于模块化，开箱即用一步到位
  • 经由过程plugin拓展，完整好用又不失天真
  • 运用场景不局限于web开辟
  • 社区巨大活泼
  • 优越的开辟体验

瑕玷

  • 只能用于模块化开辟

6.Rollup

Rollup是一个相似于Webpack模块打包东西，但专注于ES6的模块化。

长处：

  • 能对es6的源码举行Tree Shaking(简朴引见剔除无效代码，轻微详细点就是能够去除已被定义却没被运用的代码并举行Scope Hoisting(作用域提拔)，以减小输出文件的大小和提拔运转机能。)

瑕玷：

  • 打包时不支撑code Spliting（对打包天生的bundle.js文件举行支解成chunk块），所以没有模块加载、实行和缓存的代码。优点是打包js库时，文件更小，然则功用不够完美
  • 插件库比较少，社区不够活泼

7.parcel

parcel是一款刚降生不久的新型打包器，而且短短几周内就取得大批赞许。

长处：

  • 疾速打包：parcel运用事变历程启用多核编译，而且有文件体系缓存，从新启动后也能够疾速构建
  • 打包一切资本：支撑JS，CSS，HTML，文件资本等等 – 不须要装置任何插件。
  • 自动转换：在须要时，代码运用 Babel，PostCSS 和 PostHTML 自动转换
  • 零设置代码拆分：运用动态 import() 语法拆分您的输出包，所以只加载初始加载时所需的内容。
  • 模块热替代：在开辟过程当中举行更改时，Parcel 会自动更新浏览器中的模块，不须要举行任何设置。
  • 友爱的毛病纪录

瑕玷：

  • 不支撑 SourceMap ：在开辟形式下，Parcel 也不会输出 SourceMap，现在只能去调试可读性极低的代码；
  • 不支撑剔除无效代码 ( TreeShaking )：许多时刻我们只用到了库中的一个函数，效果 Parcel 把全部库都打包了进来；
  • 零设置的完成本质是默认值，Parcel 只要在目次中发明这些设置文件就会以为该项目中的代码须要被处置惩罚，致使某些已被处置惩罚的库能够会被屡次处置惩罚
  • 某些设置被封闭，在特定场景不实用
  • 只专注于构建用于运转在浏览器中的网页，不像webpack一样能够打包宣布npm的库，构建nodejs同构运用等

生长汗青

  • npm script 和grunt， web开辟要做的事变变多，流程庞杂，引入自动化头脑
  • Gulp时期，涌现一些新言语进步开辟效力，流式处置惩罚头脑的涌现，简化了文件转换的流程
  • webpack时期，单页运用盛行，网页功用越发庞杂和巨大，web开辟向模块化革新，

作用

1. 完成模块化和版本治理

当项目比较巨大时，须要引入差别的库，带来了以下题目：

差别库定名空间争执（比方jq和zepto都运用了window.$）
库之间有依靠，须要掌握加载递次
须要治理库的版本
这类情况下，模块化的头脑涌现了：将庞杂体系支解成多个模块以轻易开辟。 重要的模块划范例：

commonJS

一种js模块化范例，commonJS的中心是经由过程requrire要领，同步加载所依靠的其他模块，经由过程module.exports导出须要的接口，详细运用体式格局在此不深切

长处
  • 代码在nodeJS的环境下能运转
  • Npm宣布的第三方模块许多都采用了commonJS范例：
瑕玷
  • 没法直接运转在浏览器环境，必需借助东西转换

AMD

另一种js模块化范例，与 commonJS的症结区别是异步加载所依靠的模块。AMD重要针对浏览器环境的模块化，代表完成是requirejs

长处
  • 可直接运转于浏览器
  • 能够异步加载
  • 能够并行加载多个依靠
  • 代码可运转在浏览器和nodejs环境
瑕玷
  • 须要先引入完成了AMD的库才运用

ES6模块化

ES6在言语层面完成模块化，经由过程运用import和export导入和导出模块。ES6的模块化将要逐步庖代Commonjs和AND范例，是模块化的最终解决方案。

长处
  • 是模块化的最终解决方案
瑕玷
  • 现在没法直接运转在大部分的js运转环境，须要借助构建东西等转换成es5

2. 完成工程化和自动化

前端工程化的意义,是为了进步编码->测试->保护 的运转效力，重要从开和布置两方面来入手：开辟方面须要做好代码范例和开辟模块化；布置阶段的重要流程包含：

  1. 代码搜检
  2. 代码兼并和紧缩
  3. 代码编译
  4. 单元测试

工程化就是借助构建东西完成流程自动化，而前端自动化能够理解为在工程化上做更进一步的自动化。

3. 机能优化

从前文对构建东西的引见能够看出，这里的机能优化重要以下方面：

  1. 代码文件紧缩，紧缩Html、Css、Javascript等文件，减小体积
  2. 图片紧缩和兼并，比方广为人知的Sprite（雪碧图）手艺

4. 提供热重载

热重载也就是自动革新，重假如监听当地源代码变化，自动从新构建和革新浏览器，跟着新的手艺框架的涌现，比方Vue,React等，这门手艺也基础成为了开辟标配。

小结

假如内容有毛病的处所迎接指出（以为看着不理解不舒服想吐槽也完整没题目）；假如对你有协助，迎接点赞和珍藏，转载请征得赞同后着明出处，假如有题目也迎接私信交换，主页有邮箱地址

参考资料，吴浩麟《深切浅出 Webpack》

    原文作者：安歌
    原文地址: https://segmentfault.com/a/1190000015957662
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞