欢迎来到 JavaScript 技术栈指南: 从零开始构建 JavaScript 技术栈.
🎉 这是本教程的第二版,与2016年发布的版本相比,更新了不少东西。欢迎查看 更新日志!
该指南讲的都是一些可实操的知识。即使是这样,阅读者还是需要具备一些简单的编程知识和 JavaScript 基础。 教程的核心是把各种工具结合起来 并且为每一种工具提供了 最简单的例子。 学习该教程后,你可以尝试 从零编写你自己的 JavaScript 技术栈模板。 因为本教程的核心是结合各种工具的使用,我并没有详细地讲解每一种工具该怎么用。如果你想要进一步了解浙西工具的使用,请参考它们的文档或指南。
如果你只是想构建一个简单的 web 页面,你可能并不需要这个完整的技术栈(把 Browserify/Webpack + Babel + jQuery 结合起来就足够了);但如果你需要构建一个可伸缩的 web app,并且需要配置各种环境,那这个教程正好适合你。
该教程的大量描述都和 React 有关。如果你是个新手并且想要学习 React,create-react-app 预设的配置能让你迅速搭建好 React 的运行环境。对于那些刚加入使用 React 团队的人来说,我建议他们使用 create-react-app 来快速搭建学习环境。在本教程中,你不会使用任何预配置,因为我希望你能够理解那些配置到底起了什么作用。
每一章的代码示例都包含在教程中,你可以通过 yarn && yarn start
来运行这些例子。不过,我建议你按着 详细指南 来把每一行代码都自己写一遍。
最终代码在 JS-Stack-Boilerplate repository, 和 releases. 在线示例: live demo 。
可运行于 Linux, macOS, 以及 Windows。
注意:本教程写作与2017年5月,因此,部分库的 API 已经做了修改。但教程中 95% 的内容仍然是有效的。如果你在阅读的时候遇到了问题,请到 issues 中查询。
02 - Babel, ES6, ESLint, Flow, Jest, Husky
06 - React Router, Server-Side Rendering, Helmet
09 - Travis, Coveralls, Heroku
配置你的编辑器 (Atom 优先), MongoDB, Progressive Web App, E2E testing。
如果想添加你的翻译,请先阅读 translation recommendations 。
- Bulgarian by mihailgaberov
- Chinese (simplified) by @yepbug
- French by Naomi Hauret
- Italian by Fabrizio Bertone - fbertone.it
查看 进行中的翻译.
- Chinese (simplified) by @pd4d10
- Italian by Fabrizio Bertone
- Japanese by @takahashim
- Russian by React Theming
- Thai by MicroBenz
Created by @verekia – verekia.com.
License: MIT