Redux-Raven-Middleware 使用教程
1. 项目的目录结构及介绍
redux-raven-middleware/
├── LICENSE
├── README.md
├── dist/
│ ├── index.js
│ └── index.js.map
├── package.json
├── src/
│ └── index.js
└── webpack.config.js
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- dist/: 编译后的文件目录,包含
index.js
和其源映射文件index.js.map
。 - package.json: 项目的依赖和脚本配置文件。
- src/: 源代码目录,包含项目的核心逻辑文件
index.js
。 - webpack.config.js: Webpack 的配置文件,用于项目的构建。
2. 项目的启动文件介绍
项目的启动文件位于 src/index.js
,这是 Redux-Raven-Middleware 的核心逻辑文件。该文件导出了一个 Redux 中间件,用于在 Redux 应用中集成 Sentry 的错误报告功能。
import Raven from 'raven-js';
const ravenMiddleware = (options = {}) => store => next => action => {
try {
return next(action);
} catch (err) {
Raven.captureException(err, {
extra: {
action,
state: store.getState()
}
});
throw err;
}
};
export default ravenMiddleware;
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。以下是关键部分:
{
"name": "redux-raven-middleware",
"version": "1.0.0",
"description": "Redux middleware for sending error reports to Sentry through Raven",
"main": "dist/index.js",
"scripts": {
"build": "webpack",
"prepublish": "npm run build"
},
"dependencies": {
"raven-js": "^3.27.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}
- name: 项目名称。
- version: 项目版本。
- description: 项目描述。
- main: 项目的主入口文件。
- scripts: 包含构建和发布前的脚本。
- dependencies: 项目运行时的依赖。
- devDependencies: 开发时的依赖。
webpack.config.js
webpack.config.js
文件用于配置 Webpack 的构建过程。以下是关键部分:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};
- entry: 入口文件路径。
- output: 输出文件的配置,包括路径和文件名。
- module: 模块的加载规则,使用 Babel 加载器处理 JavaScript 文件。