前端开发的一些基本概念

Node.js

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的 JavaScript 运行时环境. 它使得 JavaScript 能够在服务器端运行, 而不仅仅是在浏览器中使用.

Node 本意 “节点”, 意味着一个独立的单元或模块. Node.js 的设计理念是通过小的, 独立的模块来构建应用程序. 这些模块可以像节点一样组合在一起, 形成一个大的, 复杂的系统.

运行 JS 程序

如在 test.js 中写:

console.log("Hello, World!");

运行:

node test.js

则输出:

Hello, World!

npm

npm, Node Package Manager, 是 Node.js 的默认包管理器.

基本使用

安装包

npm install <package-name>

会将包添加到 node_modules 目录中.

卸载包

npm uninstall <package-name>

更新包

npm update <package-name>

package.json

是 npm 项目的配置文件, 包含项目的元数据, 依赖关系, 脚本命令等, 如:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "mocha"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "mocha": "^9.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

可以用:

npm init

来创建一个 package.json 文件.

运行脚本

如:

{
  "scripts": {
    "start": "node app.js",
    "test": "mocha"
  }
}

定义了两个命令:

npm run start
npm run test

npx

npx 是 Node.js 附带的一个命令行工具, 允许轻松地执行来自 npm 包中的可执行文件.

多用于执行没有全局安装的包内的可执行文件, 如:

npx create-react-app my-app

这里的 create-react-app 就是一个包内的可执行文件.

JSX

JSX, JavaScript XML, 是一个 JavaScript 的语法扩展，被广泛用于 React 来描述 UI 界面. 其允许在 JavaScript 代码中编写类似 HTML 的标签语法, 从而使得构建用户界面变得更加直观和简洁.

但 JSX 不能直接在浏览器中执行的. 它需要通过 Babel 等编译工具将其转换为标准的 JavaScript 代码. 也就是说, 作为 JS 的扩展语法, 浏览器本身是不认识它的, 需要其他工具进行转换.

TypeScript

TypeScript 是 JavaScript 的一个超集, 增加了静态类型检查和其他特性.

在服务器端运行 TypeScript

TypeScript 本身不能直接在服务器上运行, 但它可以被编译成标准的 JavaScript, 然后运行在任何支持 JavaScript 的环境中, 包括 Node.js.

初始化一个 Node.js 项目

mkdir type-test
cd type-test
npm init -y

安装 TypeScript 和 ts-node

TypeScript 需要通过 npm 包管理器来安装.

ts-node 是一个 TypeScript 执行器, 它允许你直接运行 TypeScript 文件, 而不需要手动编译.

npm install typescript ts-node @types/node --save-dev

配置 TypeScript

创建 tsconfig.json 文件来配置 TypeScript 编译选项:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

示例代码及运行

// src/index.ts
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet('World'));

用:

npx ts-node src/index.ts

或者编译后运行:

npx tsc   # 编译 TypeScript 文件
node dist/index.js   # 运行编译后的 JavaScript 文件

Webpack

Webpack 是一个现代 JavaScript 应用程序的模块打包工具. 它的主要功能是将项目中的各种模块 (包括 JavaScript, CSS, 图片等) 打包成一个或多个文件, 这些文件可以在浏览器中高效地加载和运行.