Comments on the engineering page

[chengpeiquan]

~

[rayadaschn]

在前端工程化这一节中，是否需要加入关于 ESLint 和 Prettier ，配合 VScode 做简单的代码格式化？

[chengpeiquan]

在前端工程化这一节中，是否需要加入关于 ESLint 和 Prettier ，配合 VScode 做简单的代码格式化？

考虑到这些都是非强制使用的工具，对于刚接触工程化的新同学来说可能有压力，所以我没有加进去，放在了 脚手架的升级与配置 里面才提及，因为这个阶段会开始涉及到项目开发，通过脚手架创建的模板大部分都会配套这些东西，放在这里说明我觉得可能时机正好。

[HelloAllenZhu]

坐等群主实战部分的内容。

[Didudia]

感谢博主，目前我也是入行前端，慢慢敲代码，看了你的文章，通俗易懂，比官方文档的入门教程更通俗。
看累了去看看菜谱哈哈哈哈，最近我也是自己做饭，绝了哈哈哈

[chengpeiquan]

感谢博主，目前我也是入行前端，慢慢敲代码，看了你的文章，通俗易懂，比官方文档的入门教程更通俗。 看累了去看看菜谱哈哈哈哈，最近我也是自己做饭，绝了哈哈哈

哈哈哈哈哈谢谢你

[EndlessShw]

1. 写的太好了！作为一名只学过了 ssm 和前端三件套的小白，这篇文章基本懂了。

Runtime ，可以叫它 “运行时” 或者 “运行时环境” ，这个概念是指，的代码在哪里运行，哪里就是运行时。
“的代码”前是不是缺了啥。

2. 打赏支持一下作者，优秀的文章值得点赞！欸嘿。

[chengpeiquan]

1. 写的太好了！作为一名只学过了 ssm 和前端三件套的小白，这篇文章基本懂了。

Runtime ，可以叫它 “运行时” 或者 “运行时环境” ，这个概念是指，的代码在哪里运行，哪里就是运行时。
“的代码”前是不是缺了啥。

2. 打赏支持一下作者，优秀的文章值得点赞！欸嘿。

谢谢支持和打赏！然后这个地方应该也是那次 减少人称代词的更新 引起的，我更正啦！

[rayadaschn]

最近在总结前端工程化的东西，还是咱这篇较为全面，难易适中。
但是部分内容好像是之前忘记填充了，在 Webpack 和 Vite 工作流程的比较 中，没有写这块的内容。也可以删除这块的文字，避免歧义。
以下是我总结的：

Webpack 工作流程:

1. 入口文件：Webpack 的入口文件指定了项目的主文件，Webpack 通过该文件找到所有的模块并构建依赖关系图。

module.exports = {
  entry: './src/index.js'
};

2. 加载器：Webpack 需要构建 CSS、字体、图片等各种资源，而不仅仅是 JavaScript。为此，我们需要使用加载器来处理这些资源。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
    ]
  }
};

3. 插件：插件是用来增强Webpack功能的，它可以执行各种任务，如压缩代码、代码分离、生成HTML等。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};

4. 出口：输出文件是Webpack最终生成的文件，它包含了所有的依赖项和代码。

const path = require('path');
module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

具体流程可以参考 深入浅出 Webpack

Vite 工作流程：

1. 在本地启动一个开发服务器，监听文件变化。
2. 当开发人员请求页面时，Vite 服务器会在内存中编译源代码，并将结果返回给浏览器。
3. Vite 会自动分析依赖关系，并加载相应的文件。
4. 在打包发布时，Vite 会对代码进行优化，压缩代码体积。

[hechunfeng123]

教程非常有帮助，谢谢，大佬有时间的话是否考虑出一套node+express+mongodb的教程？特别是部署这一块,比如使用iis、宝塔、pm2啥的真正做到一个能线上访问

[chengpeiquan]

教程非常有帮助，谢谢，大佬有时间的话是否考虑出一套node+express+mongodb的教程？特别是部署这一块,比如使用iis、宝塔、pm2啥的真正做到一个能线上访问

我三月份换工作后一直比较忙，好久没码字了，这方面应该也蛮多人写了分享，可以先搜索看看~ 宝塔我也没有用过，服务端我还是 Linux 用的比较多，21 年在 Vite 2 和 Vue 3 刚出来的时候写过一篇博客的改版介绍 重构于Vite ，里面有介绍了一些技术栈、 CI 构建、代码同步和服务端部署的操作思路也可以看看。

因为 Node 本身具备了 Nginx 的一些功能，所以我服务器是没有用 Nginx 的，涉及到的端口转发等服务代理是通过 http-proxy 操作，有相关需要的话也可以看看它的 README 文档~