React & Redux 入门教程 - 第五篇:React & Redux 工具箱

本文是《React & Redux 入门教程》系列文章的第五篇,也是最后一篇。本篇我们将介绍 React & Redux 相关的一些工具。工欲善其事,必先利其器。首先我们会介绍 react-redux 这个项目,看看官方推荐我们怎么对 React 和 Redux 做 binding。然后我们会介绍 Babel,学习如何使用和扩展新的 JavaScript 语法。最后我们介绍 webpack,学习如何对程序进行打包和压缩。

react-redux

在上一篇教程中所写的 React & Redux 程序中,我们是这样对 React 和 Redux 做 binding 的:

// Bind React and Redux
const render = () => ReactDOM.render(
  <MarkdownEditor markdown={store.getState().markdown} updateMarkdown={
    (markdown) => store.dispatch({ type: "UPDATE_MARKDOWN", markdown })} />,
  document.getElementById('root')
);
render();
store.subscribe(render);
More...

从零搭建React全家桶框架教程

网上react、webpack、redux全家桶的文档零零散散的实在不好找,无意中看到一篇写的比较好的,留档备份。如果按照作者写的一步一步来是没有任何问题的。当时我是没发现这篇文档,硬着头皮啃的官方手册,看的头晕眼花的,最后在BBS里看到有人发了有某网站的视频就看了看写了写才搞明白怎么回事。现在学习全家桶可比我那时候幸福很多了。

文档地址:https://github.com/brickspert/blog/issues/1

More...

webpack前端配置文件备份

下面这份webpack配置文件是我使用的最多的一份,里面已经集成到有jquery与react了

1、package.json

  "devDependencies": {
    "autoprefixer": "^7.2.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "html-withimg-loader": "^0.1.16",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.10",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
  },
  "dependencies": {
    "jquery": "^3.2.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
More...

webpack入坑笔记

1、下面是一段非常常规而且非常简单并且没有实际意义的webpack配置文件,里面有坑,在做配置的时候需要注意:
1.1:做多入口文件时,如果想打包后的文件名跟自己的文件名是一样的,在入口文件前请使用字符串写上自己想要的文件名,在很多资料里并没有提及这一点,都是写一个entry然后不做任何说明。
1.2:在配置模块里的rules规则时,test后面不需要加引号,往往在IDE里写代码的时候因为习惯敲了一个引号以后IDE会去自动补全,但是这样在最后打包的时候会提示“Module parse failed: Unexpected token”语法错误

// 引入NodeJs的Path模块
const path = require('path');
module.exports={
    // 入口文件配置
    entry:{
        'demo1':'./src/demo1.js',
        'demo2':'./src/demo2.js'
    },
    output:{
        filename:'js/[name].js',
        path:path.resolve(__dirname,'dist')
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules:[
            {
                test:/\.css/,
                use:['style-loader','css-loader']
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'127.0.0.1',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
}
More...