前言
这篇文档我们来配置 eslint, 创建项目文件, 目录架构
开发
一, 配置 eslint
配置 eslint 我需要安装一些依赖包:
npm install -D eslint eslint-loader eslint-plugin-react babel-eslint
修改 webpack.config.js 文件
- {test:/\.(js|jsx)$/,
- use:["babel-loader", "eslint-loader"],
- exclude:/node_modules/
- }
创建. eslintrc.js 文件
- module.exports = {
- "env": {
- "browser": true,
- "commonjs": true,
- "es6": true
- },
- "extends":[
- "eslint:recommended",
- 'plugin:react/recommended',
- ],
- "parser": 'babel-eslint',
- "parserOptions": {
- "ecmaFeatures": {
- "experimentalObjectRestSpread": true,
- "jsx": true
- },
- "sourceType": "module"
- },
- "plugins": [
- "react"
- ],
- "rules": {
- "indent": [
- "error",
- 4
- ],
- "linebreak-style": [
- "error",
- "windows"
- ],
- "quotes": [
- "error",
- "single"
- ],
- "semi": [
- "error",
- "never"
- ],
- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
- 'no-console': 0
- }
- };
当然, 也可以使用 eslint --init 来创建
> eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
- ? Do you use CommonJS? Yes
- ? Do you use JSX? Yes
- ? Do you use React? Yes
- ? What style of indentation do you use? Spaces
- ? What quotes do you use for strings? Single
- ? What line endings do you use? Windows
- ? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
eslint 的配置规则有很多, 可以按照自己喜欢的方式来, 网上也有很多很好的规则, 这里就不一一介绍了.
二, 完善项目文件, 目录结构
先来看下我们上一篇时创建的简单目录结构
- src
- index.html
- index.js
- .gitignore
- package-lock.json
- package.json
- webpack.config.js
很简单, 实际项目中的结构不会这么简单, 让我总体看下实际的目录结构吧
- mock # 本地模拟数据
- public
- src
- | assets # 本地静态资源
- common # 应用公用配置, 如导航信息
- components # 项目通用通用组件
- routes # 业务页面入口和常用模板
- utils # 工具库
- index.html # HTML 入口模板
- index.js # 应用入口
- index.less # 全局样式
- router.js # 路由入口
- tests # 测试工具
- .babelrc
- .eslintrc.js
- .gitignore
- package-lock.json
- package.json
- webpack.config.js
我的目录结构大概就是这样, 可能会有差别哦~
好, 下面让我们创建一些代码, 在 routes 文件夹下创建一个 Home.jsx
- import React, {PureComponent} from 'react'
- export default class Home extends PureComponent{
- render(){
- return (
- <div>Hello World!</div>
- )
- }
- }
router.js 里
- import React from 'react'
- import {Route,HashRouter} from 'react-router-dom'
- import Home from './routes/Home.jsx'
- const RouterConfig = ()=>{
- return (
- <HashRouter>
- <Route path="/" component={Home}/>
- </HashRouter>
- )
- }
- export default RouterConfig
index.js 里
- import React from 'react'
- import ReactDOM from 'react-dom'
- import Router from './router'
- ReactDOM.render(
- <Router />,
- document.getElementById('root')
- )
然后我们 npm start 下, 又是和 Hello World 相见的时候了.
总结
本篇主要讲了 2 点
配置 eslint
项目目录结构
下篇我们来介绍实现 mock 本地数据模拟接口
来源: https://juejin.im/post/5b17aab1e51d4506a269acd5