前端新人求教:前端工程化

[unco020511]

最近在学 vue 和 node 准备用 js 来做一个网站应用,包括前后端

但是感觉前端的东西很多:

• npm
• cli
• node
• vue
• yarn
• webpack
• Vite
• es6/es2015
• Babel
• ESLint
• Prettier
• ...

我本身不是做前端的,所以对前端的工程化比较陌生,看起来挺复杂,想问下有没有比较全面的资料来介绍前端开发工程化的一些历史是如何逐步发展的,特别是上面这些工具 /库的出现场景,是为了解决什么问题,然后现状是什么样的,推荐用哪些工具,以及最佳实践

[superedlimited]

我们做前端的，一般第一件事就是把 mdn 全文背诵~

[yhxx]

不太恰当的类比：
npm - maven
vue - spring
yarn - gradle
webpack - jvm
ES6/ES2015 - JDK1.8/Java SE 8
ESLint - Detekt

[pengtdyd]

学 react 吧，趁现在还是新人，浪子回头还不晚。V 站 react 多

[xqk111]

@pengtdyd 哈哈哈，突然发现这么多做 react ，我还以为很少

[string2020]

建议先学百度搜索

[b1ncer]

这时候就要搬出偶像的这篇回答了：

大公司里怎样开发和部署前端代码？ - 张云龙的回答 - 知乎
https://www.zhihu.com/question/20790576/answer/32602154

[foyo]

无脑上 Nuxt.js 或 Next.js ，工程都搭建好了，按照文档写代码就好。

[DOLLOR]

直接用脚手架，不用你自己折腾这些

[jydeng]

用脚手架，真的需要再学

[dcsuibian]

打好 js 基础，es5 、es6 得熟悉
决定选 vue 还是 react ，然后找个 B 站视频跟着学下去，学完脚手架就基本 ok 了

看着很多，但其实没那么夸张
es5 、es6 是 js 基础，必须会
node 文档就不用看了（毕竟你还是写前端）。npm 学一下，其实就是个装包的，总共就几个命令。
yarn 跟 npm 类似，不必学，npm 配置好代理完全够用。更何况还有 pnpm
webpack 、vite 、babel 、eslint 、prettier 一般都是脚手架附带的，用不着管
cli 算啥？不就是命令行么

[ChefIsAwesome]

我简单介绍下历史：
1.为了合并文件以减少 http 请求，为了混淆前端代码，出现了最早的命令行工具。
2.代码当然要模块化，可是早期网页交互非常简单，js 并没有模块化的概念。node 造了一个模块化的系统。网页前端开发者觉得不错，于是有了工具，让网页开发的时候可以用 node 的模块化系统，最后合并成浏览器可以用的 js 文件。
3.这种合并文件的操作，事实上就跟编译差不多。既然都要编译了，js 的语法也可以改了。react 这种 js 文件里写 html ，脑洞比较大的想法就出现了。
4.想用新语言特性，旧浏览器不支持怎么办，那就写新语言，babel 编译成旧语言。想给 js 加类型系统怎么办，那就造个 typescript ，再编译成 js 。编译速度慢，那就造个新的编译系统。

[ljrdxs]

我不做前端了。
当年前端工程化：
一、不跑后端代码，如何只靠假数据渲染模板、模拟接口？前端自己造假数据、status code 。
二、开发环境完整代码，上线或测试环境自动压缩（删注释之类）
三、CDN 独立发布，不跟后端一起。

我还记得上传文件异步接口，测试上传进度，我接触到最牛逼的高手们都没法模拟，都说要写真实接口。