前端工具链

前端的工具链主要涵盖以下部分：

• 脚手架（模版创建）
• 包管理
• 代码检查（风格检查、类型检查）
• Git 提交信息检查
• 格式化
• 编译
• 最小化
• 打包
• 文档生成
• 加载器
• 测试
• Dev Server (包括 HMR)
• Mock Server

Scaffolding Tools or Starter

• Yeoman
  • Created: 2012
  • Homepage: https://yeoman.io/
  • GitHub: https://github.com/yeoman/
• Ember CLI
  • Created: 2013
  • Homepage: https://cli.emberjs.com/release/
  • GitHub: https://github.com/ember-cli/ember-cli
• Angular CLI
  • Created: 2015
  • Homepage: https://cli.angular.io/
  • GitHub: https://github.com/angular/angular-cli
• Create React App
  • Created: 2016 by Christopher Chedeau
  • Homepage: https://create-react-app.dev/
  • GitHub: https://github.com/facebook/create-react-app
• Vue CLI
  • Created: 2017 by 尤雨溪（Evan You）
  • Homepage: https://cli.vuejs.org/
  • GitHub: https://github.com/vuejs/vue-cli

Module Loaders

• RequireJS
  • Created: 2009 by James Burke
  • Homepage: https://requirejs.org/
  • GitHub: https://github.com/requirejs/requirejs
• LABjs
  • Created: 2009 by Kyle Simpson
  • GitHub: https://github.com/getify/LABjs
• Sea.js
  • Created: 2010 by 玉伯(lifesinger)
  • Homepage: https://seajs.github.io/seajs/docs/
  • GitHub: https://github.com/seajs/seajs
• curl.js (cujoJS resource loader)
  • Created: 2011 by John Hann
  • GitHub: https://github.com/cujojs/curl
• Cajon
  • Created: 2012
  • GitHub: https://github.com/requirejs/cajon
• ES Module Loader Polyfill
  • 2012
  • GitHub: https://github.com/ModuleLoader/es-module-loader
• SystemJS
  • Created: 2013 by Guy Bedford
  • GitHub: https://github.com/systemjs/systemjs
• ESL (Enterprise Standard Loader)
  • Created: 2013
  • GitHub: https://github.com/ecomfe/esl
• StealJS
  • Created: 2014 by David Luecke
  • GitHub: https://github.com/stealjs/steal
• loader.js
  • Created: 2014
  • GitHub: https://github.com/ember-cli/loader.js
• define.js
  • Created: 2014 by Mehran Hatami
  • GitHub: https://github.com/fixjs/define.js
• VSCode Loader
  • Created: 2015
  • GitHub: https://github.com/Microsoft/vscode-loader
• @dojo/loader (dojo-loader)
  • Created: 2016
  • GitHub: https://github.com/dojo/loader

Module Bundlers

• Browserify:
  • Created: 2010 by James Halliday
  • Homepage: http://browserify.org/
  • GitHub: https://github.com/browserify/browserify
• wepack
  • Created: 2012 by Tobias Koppers
  • Homepage: https://webpack.js.org/
  • GitHub: https://github.com/webpack/webpack
• FIS
  • FIS
    • Created: 2013 by Baidu FEX team
    • GitHub: https://github.com/fex-team/fis
  • FIS3
    • Created: 2015
    • GitHub: https://github.com/fex-team/fis3
• Rollup
  • Created: 2015 by Rich Harris
  • Homepage: https://rollupjs.org/
  • GitHub: https://github.com/rollup/rollup
• FuseBox
  • Created: 2016
  • Homepage: https://fuse-box.org/
  • GitHub: https://github.com/fuse-box/fuse-box
• Metro
  • Created: 2017 by Facebook, Inc. 源于 React Native Packager (2015)
  • Homepage: https://facebook.github.io/metro/
  • GitHub: https://github.com/facebook/metro
• Fastpack
  • Created: 2017 by Andrey Popp
  • Homepage: https://fastpack.sh/
  • GitHub: https://github.com/fastpack/fastpack
• Parcel
  • Created: 2017 by Devon Govett
  • Homepage: https://parceljs.org/
  • GitHub: https://github.com/parcel-bundler/parcel
• Microbundle
  • Created: 2017 by Jason Miller
  • GitHub: https://github.com/developit/microbundle
• esbuild
  • Created: 2020 by Evan Wallace
  • Homepage: https://esbuild.github.io/
  • GitHub: https://github.com/evanw/esbuild
• Jetpack++
  • GitHub: https://github.com/vincentdchan/jetpack.js
• bundless
  • Created: 2020
  • Homepage: https://bundless.vercel.app/
  • GitHub: https://github.com/remorses/bundless

Build Tools or Build System

• Grunt
  • Created: 2011 by Ben Alman
  • Homepage: https://gruntjs.com/
  • GitHub: https://github.com/gruntjs/grunt
• Gulp
  • Created: 2013
  • Homepage: https://gulpjs.com/
  • GitHub: https://github.com/gulpjs/gulp
• Snowpack
  • Created: 2019 by Fred K. Schott
  • Homepage: https://www.snowpack.dev/
  • GitHub: https://github.com/snowpackjs/snowpack
• Vite
  • Created: 2020 by 尤雨溪（Evan You）
  • Homepage: https://vitejs.dev/
  • GitHub: https://github.com/vitejs/vite
• WMR
  • Created: 2020 by Jason Miller
  • Homepage: https://wmr.dev/
  • GitHub: https://github.com/preactjs/wmr

Toolchains

• Rome
  • Created: 2020 by Sebastian McKenzie
  • Homepage: https://rome.tools/
  • GitHub: https://github.com/rome/tools
• Rush Stack
  • Homepage: https://rushstack.io/
  • GitHub: https://github.com/microsoft/rushstack
  • Rush
    • Homepage: https://rushjs.io/

Package Managers

• npm
  • Created: 2009 by Isaac Z. Schlueter
  • Homepage: https://www.npmjs.com/
  • GitHub: https://github.com/npm/cli
• volo
  • Created: 2010 by James Burke
  • Homepage: https://volojs.github.io/
  • GitHub: https://github.com/volojs/volo
• spm
  • Created: 2012
  • GitHub: https://github.com/spmjs/spm
• Component
  • Created: 2012 by TJ Holowaychuk
  • Homepage: http://component.github.io/
  • GitHub: https://github.com/componentjs/component
• Jam
  • 2012 by Caolan McMahon
  • GitHub: https://github.com/caolan/jam
• Bower
  • Created: 2013 by André Cruz
  • Homepage: https://bower.io/
  • GitHub: https://github.com/bower/bower
• jspm
  • Created: 2013 by Guy Bedford
  • Homepage: https://jspm.org/
  • GitHub: https://github.com/jspm/jspm-cli
• cnpm
  • Created: 2013
  • Homepage: https://cnpmjs.org/
  • GitHub: https://github.com/cnpm/cnpm
• Duo
  • Created: 2014 by Matthew Mueller
  • GitHub: https://github.com/duojs/duo
• Yarn
  • Created: 2016 by Sebastian McKenzie
  • Homepage: https://yarnpkg.com/
  • GitHub: https://github.com/yarnpkg
• pnpm
  • Created: 2016 by Rico Sta. Cruz and Zoltan Kochan
  • Homepage: https://pnpm.js.org/
  • GitHub: https://github.com/pnpm/pnpm
• tink
  • Created: 2018 by Kat Marchán
  • GitHub: https://github.com/npm/tink

Project Management

• Lerna
  • Created: 2015 by Sebastian McKenzie
  • Homepage: https://lerna.js.org/
  • GitHub: https://github.com/lerna/lerna
• Bolt
  • Created: 2017 by James Kyle
  • GitHub: https://github.com/boltpkg/bolt

Transpilers or Compilers

• Google Closure Compiler (GCC)
  • Created: 2009
  • Homepage: https://developers.google.com/closure/compiler/
  • GitHub: https://github.com/google/closure-compiler
• coffee (CoffeeScript compiler)
  • Created: 2009
  • Homepage: https://coffeescript.org/
  • GitHub: https://github.com/jashkenas/coffeescript/
• Traceur Compiler
  • Created: 2011
  • GitHub: https://github.com/google/traceur-compiler
• tsc (TypeScript compiler)
  • Created: 2014
  • Homepage: https://www.typescriptlang.org/
  • GitHub: https://github.com/microsoft/TypeScript
• Flow (实际上 Flow 不是编译器)
  • Created: 2014
  • Homepage: https://flow.org/
  • GitHub: https://github.com/facebook/flow
• Babel (6to5)
  • Created: 2014 by Sebastian McKenzie
  • Homepage: https://babel.dev/ and https://babeljs.io/
  • GitHub: https://github.com/babel/babel
• swc
  • Created: 2017 by 강동윤 (kdy1)
  • Homepage: https://swc.rs/
  • GitHub: https://github.com/swc-project/swc

Linters

• JSLint
  • Created: 2010 by Douglas Crockford
  • Homepage: https://www.jslint.com/
  • GitHub: https://github.com/douglascrockford/JSLint
• JSHint
  • Homepage: https://jshint.com/
  • GitHub: https://github.com/jshint/jshint/
• ESLint
  • Created: 2013 by Nicholas C. Zakas
  • Homepage: https://eslint.org/
  • GitHub: https://github.com/eslint/eslint
• TSLint
  • Created: 2013
  • Homepage: https://palantir.github.io/tslint/
  • GitHub: https://github.com/palantir/tslint
• Stylelint
  • Created: 2014
  • Homepage: https://stylelint.io/
  • GitHub: https://github.com/stylelint/stylelint

Code Formatter or Beautifier

• Prettier
  • Created: 2016 by James Long
  • Homepage: https://prettier.io/
  • GitHub: https://github.com/prettier/prettier