前言

对于 Javascript 的基础已经有了一定程度的掌握，现在想要试试配置一个生产环境，项目是这个六年前的老东西。

配置过程

代码格式化工具prettier

运行以下代码进行安装

1
npm install prettier -g

运行以下代码进行格式化

1
prettier --write ./src/index.html

–write 选项可以在格式化后自动保存代码

配置prettier

新建文件 .prettierrc.json 文件，将以下内容复制进去 (这里只是简单设置一下，还有更多其他配置可以更改)

1
2
3
4
{
  "singleQuote": true,
  "trailingComma": "es5"
}

配置Eslint

JavaScript 代码检查的首选工具 ESLint，运行以下代码下载 ESLINT

1
npm install --save-dev eslint prettier babel-eslint

新建文件 .eslintrc.json 文件，将以下内容复制进去 (这里只是基础配置，需要根据项目进行更改)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "no-console": 0
  }
}

对于这个项目的 .eslintrc.json 文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFetures": {
        "jsx": true
    }
  },
  "plugins": ["react"],
  "rules": {
    "semi": "error",
    "no-console": 0,
    "react/jsx-uses-vars": "error"
  }
}

额外的依赖

太多了，写这算了，开摆

1
@babel/preset-react，react，react-dom，date-fns，react-async-hook，format-number

最终package.json文件如下 (编写于2026.5.3)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "name": "project",
  "version": "1.0.0",
  "description": "Trying to build my first project",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tidy-code": "prettier ./src/index.html",
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "Elyrene",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-react": "^7.28.5",
    "babel-eslint": "^10.1.0",
    "eslint": "^9.0.0",
    "eslint-plugin-react": "^7.37.5",
    "parcel": "^2.16.4",
    "prettier": "^3.8.3"
  },
  "dependencies": {
    "date-fns": "^4.1.0",
    "format-number": "^3.0.0",
    "react": "^19.2.5",
    "react-async-hook": "^4.0.0",
    "react-dom": "^19.2.5"
  }
}

修改index.js代码

毕竟是6年前的老东西了，会出现些错误，这里需要稍作修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

//获取 DOM 容器
const container = document.getElementById('app');

//创建根
const root = createRoot(container);

//渲染应用
root.render(<App />);

if (module.hot) {
  module.hot.accept(function() {
    window.location.reload();
  });
}

还有不要忘记修改 index.html 引入语句

1
<script src="index.js" type="module"><script>

结语

这个生产环境也是成功配置好了，正常运行。不得不说还挺麻烦的。