一个 React & Redux的目录树

|-----------------------------------------|
|                                         | 
|            React & Redux                | | | |-----------------------------------------| 

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": 

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/7872862.html