一个 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":
以上是 一个 React & Redux的目录树 的全部内容， 来源链接： utcz.com/z/383967.html
