React & Redux
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
Project | |-- node_modules | | | |-- react | | | |-- react-dom | | | |-- react-router | | | |-- react-redux => redux本身只能处理同步的Action | | | |-- react-thunk => 在我们没有加上thunk这个中间件之前， | | store的dispatch方法只能传入一个action对象， | | thunk的作用就是能够让我们可以将一个function方法传入diptach， | | 这在做异步的时候非常有用。 | | | |-- redux-promise => redux-promise支持将promise对象作为参数传入dispatch中。 | | | |-- prop-types => React.PropTypes 自 React v15.5 起已弃用。 | | 请使用 prop-types 库代替。调用方法： | | import PropTypes from 'prop-types' | | | |-- @types/react => implements method in React.Component,解决 | | Cannot resolve symbol 'Component' 的问题 | | | |-- postcss-loader => PostCSS，一款通过 JS 插件转换 styles 样式的工具。 | | 根目录下新建postcss.config.js文件。配置如下： | | module.exports = { | | parser: 'sugarss', | | plugins: { | | 'postcss-import': {}, | | 'postcss-cssnext': {}, | | 'cssnano': {} | | } | | } | | webpack配置：{ | | test: /\.css$/, | | use: ['style-loader', 'css-loader','postcss-loader'] | | } | | | |-- Autoprefixer => PostCSS插件，一个后处理程序。解析CSS并添加浏览器前缀。 | | postcss.config.js文件中配置如下： | | module.exports = { | | plugins: [ | | require('autoprefixer')({}) | | ] | | } | | | |-- extract-text-webpack-plugin => 将css单独打包成一个文件。 | | 它会将所有的入口 chunk(entry chunks)中引用的 *.css， | | 移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到JS bundle中， | | 而是会放到一个单独的 CSS 文件（即 styles.css）当中。 | | 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle | | 会跟 JS bundle 并行加载。 | | | |-- optimize-css-assets-webpack-plugin => 压缩抽离后的css代码, | | plugins: [new OptimizeCssAssetsPlugin()] | | | |-- html-webpack-plugin => 该插件将为您生成一个HTML5文件， | | 其中包括使用script标签的body中的所有webpack包。 | | | |-- copy-webpack-plugin => 在webpack中拷贝文件和文件夹。例如： | | new CopyWebpackPlugin([ | | {from: "./src/static/images", to: 'images/'} | | ]) | | 作用就是将 ./src/static/images | | 目录下的图片拷到编译目录到 images 文件夹下面 | | | |-- rimraf => 编译前清空dist目录。package.json配置： | | "scripts": {"build": "rimraf dist && ..."} | | | |-- OpenBrowserPlugin => webpack编译后自动打开浏览器 | | | |-- axios => 一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 | | | |-- babel-eslint => 一个Babel parser的包装器，这个包装器使得Babel parser可以和ESLint协调工作 | | .eslintrc.js中配置："parser": "babel-eslint", | | "parserOptions": { | | "sourceType": "module", | | "allowImportExportEverywhere": false, | | "codeFrame": false | | } | | | |-- webpack | | | |-- webpack-dev-middleware | | | |-- webpack-hot-middleware | |-- dist => 打包输出文件目录 | |-- src | | | |-- actions => Action是把数据从应用传到 store 的有效载荷。 | | 它是 store 数据的唯一来源，一般通过 | | store.dispatch() 将 action 传到 store。 | | | |-- reducers => Action只是描述了有事情发生了这一事实， | | 并没有指明应用如何更新 state。 | | reducer 用来做更新state这个动作。 | | | |-- store => 1.维持应用的state； | | 2.提供 getState() 方法获取 state； | | 3.提供 dispatch(action) 方法更新state； | | 4.通过 subscribe(listener) 注册监听器； | | 5.通过 subscribe(listener) 返回的函数注销监听器。 | | | |-- components => 展示型组件目录 | | | |-- containers => 容器型组件目录 | | | |-- config => 配置actionType、接口 | | | |-- library => 插件库 | | | |-- service => 服务配置 | | | |-- static => 静态文件目录 | | | |-- main.js => 入口文件 | |-- webpack => webpack配置目录 | |-- .babelrc => Bable的配置文件，用来设置转码规则和插件。 | Babel是一个广泛使用的ES6转码器， | 可以将ES6代码转为ES5代码。 | |-- .gitignore => git上传忽略特殊文件配置 | |-- index.html | |-- README.md | |-- package.json => 定义了这个项目所需要的各种模块，以及项目的配置信息。 | |-- package-lock.json => npm5.0后新增。记录了整个 node_modules | 文件夹的树状结构,当重新安装模块的时候， | 速度加快。但是，生成pack-lock.json后， | 重复执行npm install时将会以其记录的版本来安装。 | 这时如果手动修改 package.json 中的版本， | 重新安装也不会生效，只能手动执行npm install | 命令指定依赖版本来进行修改。 | | |-- yarn.lock => yarn.lcok文件是自动产生的， | 和package-lock.json的功能一样， | 只不过yarn可以做到手动更改package.json后， | 重新安装并更新lockfile。 |