前端工程化工具极简介绍

## 环境

### Node.js [https://nodejs.org/]( https://nodejs.org/)

前端工程化的基础。一个可在浏览器之外运行 JS 的环境。

## 包管理

### npm [https://www.npmjs.com/]( https://www.npmjs.com/)

Node Package Manager 简写。分为两部分：1. 包管理 cli [https://docs.npmjs.com/cli/v8/commands]( https://docs.npmjs.com/cli/v8/commands) 2. 包仓库 [https://www.npmjs.com/]( https://www.npmjs.com/)

### yarn [https://yarnpkg.com/]( https://yarnpkg.com/)

用于替代 npm 的 cli 功能（但包仓库永远只有 npm 的公共或私有部署形式，所以一般语境中的 "npm" 主要是指包仓库）。

### pnpm [https://pnpm.io/]( https://pnpm.io/)

另一个包管理 cli ，更快更好用。

## 构建

### webpack [https://webpack.js.org/]( https://webpack.js.org/)

从 grunt 、gulp （均已淘汰）发展而来，使用最广泛的前端打包工具，统治了 2021 年之前 5~6 年的前端开发。

### rollup [https://rollupjs.org/]( https://rollupjs.org/)

比 webpack 简单一些的打包工具，很多开源库项目使用其打包。

### Vite [https://vitejs.dev/]( https://vitejs.dev/)

比 webpack 速度快，其相当于一个工具整合：开发时使用 esbuild (Go 编写，非 JS ，故速度快)，构建时使用 rollup 。

## 编译器

### Babel [https://babeljs.io/]( https://babeljs.io/)

开发直接使用 JS 新语法，浏览器尚未支持，Babel 用于将新语法转为浏览器支持的旧语法。

### TypeScript [https://www.typescriptlang.org/]( https://www.typescriptlang.org/)

除去语言属性，TS 本身也有编译器。可将 TS + 新语法转为浏览器支持的旧语法，可替代 Babel 。

## 开发辅助

### ESLint [https://eslint.org/]( https://eslint.org/)

配在本地的 JS 开发辅助工具，用于校验和提示 JS 错误，可自定义提示规则。

### Prettier [https://prettier.io/]( https://prettier.io/)

配在本地的开发辅助工具，可自动将 HTML JS CSS React 等代码格式化(Prettier 用于代码排版，ESLint 用于代码错误)。

#https #### #org #com #JS #www #npmjs #io ### #cli

请教个关于 npm 依赖中版本号的问题。

1. 项目中有使用到 [gulp-uglify 3.0.2]
2. [gulp-uglify 3.0.2] 包中的[package.json]中定义了一个依赖：["uglify-js": "^3.0.5"] [gulp-uglify package.json]( https://github.com/terinjokes/gulp-uglify/blob/master/package.json)
3. 目前[uglify-js] 在 npmjs 中最新版本是 [3.17.1] ，根据版本规则来说，[^3.0.5] 应该是能匹配到 [3.17.1] [npmjs uglify-js]( https://www.npmjs.com/package/uglify-js)
4. 但是实际在使用[npm install]的时候，发现[uglify-js] 依赖成了 [3.15.3]版本。
5. 但是在使用[pnpm install] 和 [cnpm install] 的时候，又正确依赖到了 [3.17.1]


请教下 这是什么原因导致的？

#uglify #js #gulp #3.0 #package #json #npmjs #3.17 #install #https

有没有可以根据磁力链接获取文件列表的工具库或者 API 服务？

试了下 https://www.npmjs.com/package/webtorrent ，但是没有成功
想知道还有没有类似的东西
只是查看文件列表，不需要下载具体文件

#文件 #https #www #npmjs #com #package #webtorrent #列表 #查看 #下载

有什么 React Native 的 UI 组件库推荐吗？

调查了一下，貌似这个用户最多： https://www.npmjs.com/package/react-native-paper

像 React ，个人觉得 mui 最优秀

请教一下 React Native 哪个组件库最优秀？

#React #优秀 #https #www #npmjs #com #package #react #native #paper

新的前端 npm 包投毒事件

起因：vue 官方转发推文（ https://twitter.com/ewind1994/status/1610868861976604673 ），一个名为 chalk-next 复刻 chalk 的包文件中包含递归删除本地配置代码。

NPM 地址： https://www.npmjs.com/package/chalk-next

NPM 帐号： https://www.npmjs.com/~vabjs

作者：chu1204505056 ，为 vue-admin-beautiful 前端 Admin 项目的作者

Github： https://github.com/chuzhixin

查到 V2EX 相关贴：《实名抵制 vue-admin-beautiful 》（ https://www.v2ex.com/t/793276?p=1 ）

#https #com #vue #chalk #www #next #NPM #npmjs #admin #beautiful