如何创建（初始化）JS开发环境
目录
创建一个基本的 JavaScript 开发环境，以满足两个要求：
- 使用 ES6（或最新的 ECMAScript 版本）语法特性
- 支持单元测试
条件
- 需要系统中已安装了 Node.js。以能够在本地运行 JavaScript 代码，以及可以使用 npm 安装和管理开发依赖项。
可访问 https://nodejs.org/ 官网，参照指示安装 Node.js
创建和配置开发环境
创建项目目录
mkdir my-js-project
初始化项目配置文件
cd my-js-project
npm init -y
这会创建一个 package.json 文件，通过此跟踪项目的依赖、以及相关开发环境的配置。
安装和配置 ES6 转译
使用 Babel 来转译 ES6 代码，安装 Babel CLI 和 Babel 预设环境包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
在 package.json 中添加 Babel 配置
"babel": { "presets": ["@babel/preset-env"] }
在 package.json 文件中的 scripts 字段添加编译命令：
"scripts": {
"build": "npx babel src --out-dir dist"
}
安装语法检查与格式化工具
使用 ESLint 来检查语法错误和格式化代码，保持代码风格一致。
安装命令：
npm install --save-dev eslint
初始化 ESLint 配置文件：
npx eslint --init
根据提示选择配置选项，例如：
- 如何使用 ESLint? 选择 “To check syntax, find problems”
- 使用的模块系统？选择 “JavaScript modules (import/export)”
- 使用的框架？选择 “None of these”
- 代码运行在哪里？选择 “Browser”
根据自身项目需求选择配置选项。
安装测试框架
使用 Jest 框架。安装命令：
npm install --save-dev jest
在 package.json 文件中的 scripts 字段添加测试命令：
"scripts": {
"test": "jest",
}
- （可选）创建示例代码并执行测试
cd my-js-project
# 创建 src 目录
mkdir src
# 创建一个JavaScript文件，例如app.js
touch src/app.js
# 创建 test 目录
mkdir test
# 创建单元测试文件，例如app.test.js
touch test/app.test.js
app.js 文件内容：
export const sum = (a, b) => a + b;
app.test.js 文件内容：
import { expect, test } from "@jest/globals";
import { sum } from "../src/app";
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});
运行测试
npm run test
附：文件结构和内容
my-js-project/
├── package.json
├── src/
│ └── app.js
├── test/
│ └── app.test.js
package.json 文件内容：
{
"name": "my-js-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"build": "npx babel src --out-dir dist"
},
"author": "",
"license": "ISC",
"description": "",
"babel": {
"presets": [
"@babel/preset-env"
]
},
"devDependencies": {
"@babel/cli": "^7.24.7",
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@eslint/js": "^9.6.0",
"eslint": "^9.6.0",
"globals": "^15.7.0",
"jest": "^29.7.0"
}
}
app.js 文件内容：
const sum = (a, b) => a + b;
module.exports = sum;
app.test.js 文件内容：
const sum = require("../src/app");
test("adds 1 + 2 to equal 3", () => {
expect(sum(1, 2)).toBe(3);
});