封面

react学习笔记之环境搭建

不知道为什么,就是突然想学一学react。先进的思想,前沿的技术,漂亮的组件。它的魔力就在于能让我一眼就爱上它!源码: react-detail

一、核心依赖

1. react

2. react-dom

3. react-redux

4. react-router

5. redux

6. react-router-redux

7. redux-thunk

8. isomorphic-fetch

9. antd

10.bootstrap

二、babel相关

1. 命令编译器

babel-cli

使用 babel script.js 一般全局安装 npm install -g babel-cli

####abel-core](https://npm.taobao.org/package/babel-core)

3. 解析器

babel-preset-es2015babel-preset-react

使用 在项目根目录新建文件.babelrc加上以下代码,可以用babel将es2015和react转成浏览器能够识别的代码

{
"presets": ["es2015","react"]
}

4. es6的stage0转码器

babel-preset-stage-0

使用 在项目根目录.babelrc加上以下代码,可以转码最新的api

{
"presets": ["stage-0"]
}

5. 转码器

babel-loader

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

6 babel插件

babel-runtime babel-plugin-transform-runtime

使用 在项目根目录.babelrc加上以下代码,可以转码最新的api

{
plugins: ["transform-runtime"]
}

7. es6转码垫片

babel-polyfill

使用: 在入口文件引入 import 'babel/polyfill';
作用:
babel-polyfill Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如IteratorGeneratorSetMapsProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。然后,在脚本头部,加入如下一行代码。import 'babel-polyfill';Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

8. react代码优化插件

babel-preset-react-optimize

1.下载 npm install --save-dev babel-preset-react-optimize

2.使用 .babelrc

{
"presets": ["es2015", "react"],
"env": {
"production": {
"presets": ["es2015", "react", "react-optimize"]
}
}
}

3.具体表现
转换常量元素 transform-react-constant-elements
转换内联元素 transform-react-inline-elements
移除属性类型 transform-react-remove-prop-types
将类转成方法 transform-react-pure-class-to-function

9. babel注册机

babel-register

使用 import 'babel-register'

作用: 能够将模块化引入的es和react代码交给babel进行转换

三、webpack

1. 依赖

  • webpack
  • webpack-dev-server
  • webpack-dev-middleware
  • webpack-hot-middleware
  • extract-text-webpack-plugin
  • html-webpack-plugin
  • copy-webpack-plugin

2. 配置

四、loaders

1. html

  • raw-loader

    2. css

  • node-sass
  • style-loader
  • css-loader
  • less-loader
  • sass-loader
  • postcss-loader

    3. 图片、字体

  • file-loader
  • url-loader
  • imorts-loader

    4. json

  • json-loader

五、其他

  • normalize
  • cssnano
  • history
  • ip
  • yargs
  • cheerio
  • better-npm-run
  • fs-extra
  • redbox-react
  • autoprefixer
  • nodemon

六、后台相关

  • debug
  • koa
  • koa-connect-history-api-fallback
  • koa-convert
  • koa-proxy
  • koa-static
  • mongoose
  • moment
文章目录
  1. 1. 一、核心依赖
    1. 1.1. 1. react
    2. 1.2. 2. react-dom
    3. 1.3. 3. react-redux
    4. 1.4. 4. react-router
    5. 1.5. 5. redux
    6. 1.6. 6. react-router-redux
    7. 1.7. 7. redux-thunk
    8. 1.8. 8. isomorphic-fetch
    9. 1.9. 9. antd
    10. 1.10. 10.bootstrap
  • 二、babel相关
    1. 1. 1. 命令编译器
      1. 1.1. 3. 解析器
      2. 1.2. 4. es6的stage0转码器
      3. 1.3. 5. 转码器
      4. 1.4. 6 babel插件
      5. 1.5. 7. es6转码垫片
      6. 1.6. 8. react代码优化插件
      7. 1.7. 9. babel注册机
    2. 2. 三、webpack
      1. 2.1. 1. 依赖
      2. 2.2. 2. 配置
    3. 3. 四、loaders
      1. 3.1. 1. html
      2. 3.2. 2. css
      3. 3.3. 3. 图片、字体
      4. 3.4. 4. json
    4. 4. 五、其他
    5. 5. 六、后台相关
  • twitter分享
    Fork me on GitHub