redux-devtools-gentest-plugin 使用教程
1. 项目的目录结构及介绍
redux-devtools-gentest-plugin/
├── examples/
│ ├── todomvc/
│ └── counter/
├── src/
│ ├── components/
│ ├── containers/
│ └── reducers/
├── test/
├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE.md
├── README.md
├── package.json
└── yarn.lock
examples/
: 包含示例项目,如todomvc
和counter
。src/
: 项目的源代码目录,包含组件、容器和 reducers。test/
: 测试文件目录。.babelrc
: Babel 配置文件。.eslintignore
: ESLint 忽略文件。.eslintrc
: ESLint 配置文件。.gitignore
: Git 忽略文件。.npmignore
: NPM 忽略文件。.travis.yml
: Travis CI 配置文件。CHANGELOG.md
: 更新日志。CODE_OF_CONDUCT.md
: 行为准则。LICENSE.md
: 许可证。README.md
: 项目说明文档。package.json
: 项目依赖和脚本配置。yarn.lock
: Yarn 锁定文件。
2. 项目的启动文件介绍
项目的启动文件通常位于 examples/
目录下,例如 examples/todomvc/index.js
或 examples/counter/index.js
。这些文件负责初始化应用并启动开发服务器。
以 examples/todomvc/index.js
为例:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App';
import reducer from './reducers';
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
3. 项目的配置文件介绍
.babelrc
Babel 配置文件,用于转译 JavaScript 代码:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
.eslintrc
ESLint 配置文件,用于代码风格检查:
{
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
// 自定义规则
}
}
package.json
项目依赖和脚本配置文件:
{
"name": "redux-devtools-gentest-plugin",
"version": "1.0.0",
"scripts": {
"start": "npm run build && node server.js",
"build": "babel src --out-dir dist",
"test": "jest"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"eslint": "^7.2.0",
"jest": "^26.0.1"
}
}
通过这些配置文件,可以确保项目在开发和构建过程中的正确性和一致性。