如何创建（初始化）JS开发环境

HenryZ 2024-07-01

创建一个基本的 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);
});