GithubHelp home page GithubHelp logo

learn_javascript_tooling's Introduction

【JavaScript】一个好汉多个帮,JavaScript强大的工具群 - JavaScript Tooling

Youtube视频讲解

https://youtu.be/Xf7832hHKX8

知识点

  • JavaScript的工具群

工具分类

  • 类型检查
  • 代码检测
  • 代码整形
  • 包管理器
  • 任务执行
  • 模块打包
  • 构建制作
  • 代码转换
  • 代码调试
  • 模块加载
  • 进程管理(Node.js)
  • 脚手架工具

【类型检查】

Flow

Facebook 开发的 JavaScript 的静态类型检查器,可用于现有的代码库,支持可选类型、类型注释、库定义、语法检测。

https://flow.org/

TypeScript

由微软公司开发的静态类型检查器,是 JavaScript 的类型化超集,编写的ts代码最终被编译为纯js代码,目前主流的IDE均支持 TypeScript 。

https://www.typescriptlang.org/

【代码检测】

ESLint

支持 JavaScript 和 JSX 的可插入代码质量检测程序,可定义代码的样式,并可以设置自动化执行脚本。

https://eslint.org/

JSHint

用于标记用JavaScript编写的程序中的可疑用法,提供了丰富的指令和可配置选项,可根据开发者团队的自身需要调整自己的编码规则。

https://jshint.com/

【代码整形】

Prettier

史上最好的代码格式化程序之一。它支持多种语言,如Javascript,JSX,HTML,CSS,Markdown等,可与主要的文本编辑器无缝集成。

https://prettier.io/

StandardJS

JavaScript的标准样式指南,包括代码的语法检测和格式化功能。

https://standardjs.com/

【包管理器】

Npm

最流行的JavaScript包管理器,含有大量的主流JS工具,附带在Node.js安装版本当中,并提供私有云企业级服务。

https://www.npmjs.com/

Yarn

Facebook一手缔造,发布于2016年,与npm处于同一级别的JavaScript包管理器,专注于构建超快速,安全和稳定的客户端应用。

https://yarnpkg.com/

Bower

为Web前端优化的软件包管理器,可以管理包含HTML,CSS,JavaScript,字体甚至图像文件的组件。 随着各种打包组件的完善,Bower今后可能会被Yarn、WebPack、Parcel替代。

https://bower.io/

【任务执行】

Grunt

自动化工具,执行重复任务,如缩小,编译,单元测试,整理等。Grunt生态系统非常庞大,有数百个可供选择的插件, 您可以使用Grunt以最少的工作量自动执行几乎所有操作。

https://gruntjs.com/

Gulp

同Grunt一样,Gulp也是一个自动化任务工具,用于在开发工作流程中自动化繁琐或耗时的任务。

https://gulpjs.com/

【模块打包】

Webpack

JavaScript应用中最受欢迎和功能最强大的模块打包工具,可以加载多种文件,具有丰富的插件生态系统,通常用于打包Web应用程序。

https://webpack.js.org/

Rollup

Rollup是JavaScript的模块打包工具,可将一小段代码编译成更大或更复杂的内容,例如库或应用程序,支持ES6模块标准。

https://rollupjs.org/

Parcel

别问,就是极速零配置Web应用打包工具,支持中文。

https://parceljs.org/

Browserify

用于为浏览器捆绑Node软件包的工具,通过捆绑所有依赖项,解决浏览器中的库依赖问题。

http://browserify.org/

【构建制作】

Make

通用构建工具,可以编写各种单独的执行任务。虽然Make大多用于C项目,但它也可以打包JavaScript应用,真的!

https://blog.jcoglan.com/2014/02/05/building-javascript-projects-with-make/

Backpack

一种简约的构建工具,可让您使用零配置来创建现代的Node.js应用和服务,处理所有文件监视,实时重载,转码和捆绑等等。

https://github.com/jaredpalmer/backpack

【代码转换】

Babel

Babel是JavaScript编译器,可以让您立即使用下一代JavaScript,支持最新的ES标准语法。

https://babeljs.io/

【代码调试】

Chrome DevTools

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。

https://developers.google.com/web/tools/chrome-devtools

Visual Studio Code

微软公司出品,最好的源代码编辑器,没有之一,不接受反驳。

https://code.visualstudio.com/

【模块加载】

RequireJS

RequireJS是一个JavaScript文件和模块加载器,它针对浏览器使用进行了优化,提高了代码的速度和质量,也可以运行在其他JavaScript环境(例如Rhino和Node)。

https://requirejs.org/

SystemJS

动态模块加载程序,可以加载在浏览器和Node中使用的所有JavaScript模块。

https://github.com/systemjs/systemjs

【进程管理】(Node.js)

Forever

一个简单的命令行界面工具,可确保脚本永远持续运行,适用于较小的Node.js应用程序的部署。

https://github.com/foreverjs/forever

PM2

Node.js应用程序的进程管理器,具有内置的负载平衡器,可让您永久保持应用程序的运行状态,无需停机即可重新加载它们, 从而帮助您管理应用程序的日志记录,监视和集群。

https://pm2.keymetrics.io/

【脚手架工具】

Yeoman

与语言无关的通用脚手架系统,允许创建任何语言的任何类型的应用,为您生成应用程序的主框架。

https://yeoman.io/

结论

在语言和框架工具选择上其实没有最佳答案,适合您的就是好工具。对于初学者朋友来说,学习曲线低,能快速上手的就是好工具。

另外,把以上这些工具都组合在一起的话,不就是Visual Studio吗?微软公司其实早帮咱们做到了。

课程文件

https://github.com/komavideo

小马视频频道

http://komavideo.com

learn_javascript_tooling's People

Contributors

komavideo avatar

Stargazers

孙逸飞 avatar Jianfeng Wen avatar  avatar WhiteInk avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.