react-webpack 入门Demo展示

发表于 2017-02-16 | 分类于 react |

基本命令配置

node环境下npm包的安装依赖

$ mkdir react-demo && cd react-demo
$ npm i -S webpack webpack-dev-server \
html-webpack-plugin webpack-merge \
babel-loader babel-core css-loader \
style-loader babel-preset-react-hmre \
babel-preset-es2015 babel-preset-react -D
$ mkdir app dist assets
$ vim assets/index.tmpl.html

编写 index.tmpl.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

配置你的 package.json 参数

{
    "script":{
        "build":"webpack .",
        "start":"webpack-dev-server ."
    },
    "babel":{
      "presets":[
        "es2015","react"
      ],
      "env":{
        "start":{
          "presets":[
              "react-hmre"
          ]
        }
      }
    }
}

新建 webpack.config.js 文件，来初始化webpack设置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const merge = require('webpack-merge');
const TAGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TAGET;
const PATHS = {
    app: path.join(__dirname,'app'),
    build: path.join(__dirname,'dist'),
    template: path.join(__dirname,'assets','index.tmpl.html')
};
const common = {
    entry:{
        app:PATHS.app
    },
    output:{
        path:PATHS.build,
        filename:'bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'react demo',
            template: PATHS.template,
            inject: 'body'
        })
    ],
    module:{
     loaders: [
         {
          test: /\.jsx?$/,
          loaders: ['babel?cacheDirectory'],
          include: PATHS.app,
        }, {
          test: /\.css$/,
          loaders: ['style', 'css'],
          include: PATHS.app,
        }
     ],
    },
    resolve:{
        extensions:['','js','jsx']
    }
};
if(TAGET === 'start' || ! TAGET) {
    module.exports = merge(common,{
        devtool:'eval-source-map',
        devServer:{
            contentBase:'/dist',
            historyApiFallback: true,
            hot:true,
            inline:true,
            progress:true,
            stats:'errors-only'
        },
        plugins:[
            new webpack.HotModuleRepleacementPlugin(),
        ]
    });
}
if(TAGET === 'start' || ! TAGET) {
    module.exports = merge(common,{});
}

App.jsx文件编写

import React,{ Component } from 'react'
import {
    Router,
    Route,
    Link,
    IndexLink,
    IndexRoute,
    hashHistory,
} from 'react-router';
const activeStyle = {
  color: '#53acff',
};
const Nav = () => (
    <div>
    <IndexLink onlyActiveOnIndex activeStyle={activeStyle} to="/">主页</IndexLink>          
    <IndexLink onlyActiveOnIndex activeStyle={activeStyle} to="/address">地址</IndexLink>
    </div>
);
const Container = (props) =>(
<div>
    <Nav /> { props.children }
</div>);
const Twitter = () => (<div>@xiaomingplus twitter</div>);
const Instagram = () => (<div>@xiaomingplus instagram</div>);
const NotFound = () => (
    <h1>404.. 找不到该页面!</h1>
);
const Home = () => (
    <h1>你好，这是主页。</h1>
);
const Address = (props) => (
<div>
    <br />
    <Link activeStyle={{ color: '#53acff' }} to="/address">这是Twitter</Link>  
    <Link to="/address/instagram">这是Instagram</Link>
    <h1>欢迎互关！</h1>
    { props.children }
</div>
);
class App extends Component {
  construct() {
  }
  render() {
    return (
        <Router history={hashHistory}>
            <Route path="/" component={Container}>
                <IndexRoute component={Home} />
                <Route path="/address" component={Address}>
                    <IndexRoute component={Twitter} />
                    <Route path="instagram" component={Instagram} />
                </Route>
                <Route path="*" component={NotFound} />
            </Route>
        </Router>
    );
  }
}
export default App;

index.jsx文件编写

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

本地启动服务器

1	$ npm start

webpack入门篇：config参数详解

发表于 2017-02-16 | 分类于 webpack |

参数的详解配置（英文）

plugins

插件项

1	plugins:[commonsPlugin]

entry

打包文件的入口点。

output

打包文件的输出点。

module.loader

多个 loader 之间用“!”连接起来

resolve

webpack插件篇：20个你必须知道的插件

发表于 2017-02-16 | 分类于 webpack |

webpack插件党推荐

npm使用入门

发表于 2017-02-16 | 分类于 npm |

webpack全局加载第三方插件jQuery类库

发表于 2017-02-16 | 分类于 webpack |

介绍

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

用webpack最大的问题就是不需要再关注依赖顺序了

【webpack 官网】

【webpack 入门文档】

第一种方法（直接引入）：

var webpack = require('webpack');
// 你要引入jquery并交由webpack打包 只需要这样使用
var $ = require('jquery');
// webpack会自动去node_modules 目录中查找资源
// console.log("一切就是如此简单愉快！")

第二种方法（webpack插件引入）：

主要依靠 webpack 中 ProvidePlugin 来实现。

module.exports = {
    resolve: {
        root: [],
        alias: {
            'jquery': path.resolve(rootDir, './lib/jquery.min.js'); 
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
    ]
};

第三种方法（expose-loader 配置）：

{
    test: require.resolve('jquery'),
    loader: 'expose?jQuery!expose?$'
 }

引用方式：

1 2	import $ from 'expose?$!jquery' import 'jquery-ui' //插件可用

第四种方法（封装jQuery）：

生成 jquery-vendor.js

var $ = require('jquery');
// es6
import $ from 'jquery';
window.$ = $;
window.jQuery = $;
exports default $

类库引用jquery时指向jquery-vendor.js

1 2	import $ from '${webroot}/jquery-vendor.js' import 'jquery-ui'

调用方便，可在webpack配置文件中创建jquery-vendor.js的别名
1
2
3
alias:{
'jquery':'${webroot}/jquery-vendor.js';
}

webpack-react-redux-startkit

发表于 2017-02-16 | 分类于 webpack |

扫盲:JS模块化开发

发表于 2016-12-23 | 分类于 JS标准指南 |

什么是模块化开发

模块化开发（modular development）,

模块化开发可以为我们解决以下问题

其一、恼人的命名冲突：
这个确实够烦人，为了解决之，我们动用闭包作用域、我们动用命名空间，再或者…

其二、烦琐的文件依赖：
这个问题更不必说，我们做前端支持的，常常要替后端同学们解决这类问题，我们自己也常常忽略这类问题。平常的开发中，我们要对我们的JS文件的加载顺序要小心加小心。一个字——确实烦。

其三、严重依赖文件的加载顺序：
当你使用script引入类库和外部脚本的时候肯定会遇到类库标识未定义的问题等等问题像“$定义不存在、$.xxx() is not function”这样或那样的问题，一般都是类库严重依赖script文件的加载顺序导致的。

模块化开发的规范有哪些？

CommonJS和AMD、CMD、UMD。

CommonJS代表：

AMD代表： Require.js 、 curl.js

CMD代表： Sea.js

资源介绍：

博客资料：

Javascript模块化编程（一）：模块的写法 - 阮一峰博客
 Javascript模块化编程（二）：AMD规范 - 阮一峰博客
 Javascript模块化编程（三）：require.js的用法 - 阮一峰博客

视频（Video）

关于借贷和裸条的一点思考

发表于 2016-12-21 | 分类于思考随想 |

原文来自于我的“知乎问答”

如何从「裸条」看待这些借贷人的借贷观念？ - 蒋万万的回答 - 知乎

关于借贷，我觉得祖辈的话还是很受用的。

1、你惦记别人的利，别人惦记着你的本，到最后，你本利无归，你觉得就这样结束了？别急，一般还有债！
2、背叛你的人永远都只会是你的朋友，或者看上去像是你朋友的人。
3、人心隔肚皮
4、铁打的营盘流水的兵

没有资本的人其实在现实世界上很难有选择的机会，总是很容易被各种诱惑所主宰，这次的网贷事件就可以说是无法避免的。
（第一次生意）
年轻的大学生（不分男女）总是有消费的欲望，我们暂不管他们去消费什么，这种需求是客观的存在的。我们呢，也不谈她们人性的光辉，善良或是邪恶、知足或是贪婪，只要有这种消费的动力，她们也只能别无选择的接收这种商品（贷款本身就是一种商品），惦记着这家或那家发布的“学生贷”的好处，交上人家要的正当信息资料，才能进入可以借贷的门槛，那么商家也要做这笔生意，权衡利弊以后觉得可以做你这笔生意，人家才可以把钱贷给你吧。双方觉得不错，签个合同画个押，生意就这样做好了。
（第二次生意）
商家这样的生意做多了，发现我们的客户（大学生没有钱没有具体的收入来源）质量也不是很好，拼死拼活也就赚这么多。不太好呀，怎么办？这样，你们不是还是需要花钱吗？那你可以多交点东西，比方说多提点利息和罚息，这样我们也更能赚的多些。大学生没办法，提就提吧，反正也是可以还完的，只要可以接收就签。双方觉得不错，签个合同画个押，生意就这样做好了。
（第三次生意）
“我为什么要签这家网贷，还有其他的可以选择，况且已经有一笔债了，先还完好了。”学生觉得后续情况不太乐观，不想签了。情绪一表现出来，商家就有察觉。“先还完也好，我这边有资金压力，嗯嗯，那你早点还好了。”商家也默认客户质量慢慢变得不好，总还是生意要做的，只不过不能给你那么多额度了，你也不再是我最想要的A类客户了。
（第四次生意）
逾期了 30天、60天、90天，看着利息每天都在长，自己的收入都填补不了这个坑。怎么办？那就不还了。商家不能等着呆账收不回钱啊。怎么办？等着数额慢慢的变大，再叫人去催收！学生一害怕就又只能老老实实的还钱了。学生想：反正商家也不知道我的钱是怎么来的，不如我再去其他的贷款网站借点钱，以后欠的可以慢慢还。然后又开始借款，拆了东墙补西墙，拆了西墙补东墙。合同签的越来越多，才发现商家的玩法都一样，自己的身上又多了不少的逾期账单。怎么办？
（第五次生意）

商家A的喽啰，就是之前跟你当朋友的那个人，会主动给你提出一个解决方法来解决这种窘境。
“因为你借的少了所以你手里的钱的根本没有办法帮你解决实际的收入问题，你需要大幅度的提额，然后还掉我们的家的款，少了一家两家之后，你就会觉得轻松很多！要不逾期和罚息你这辈子都还不完！”商家A的喽啰说道。学生一听也确实是这个理，那就提提额吧。那具体怎么提呢？“要找口子的，你按照我要求的东西提供下，我帮你去找商家B！”喽啰说道。学生只能接收他提的条件。
（第六次生意）

要什么都可以，只要能结束这种情况。
So…. ~你懂的！
（第七次生意）
没办法~忍气吞声
（第八次生意）

没办法~如果不还清，同学们会怎么看我？！

（第九次生意）

没办法~信用快要破产了~

（第十次生意）

没办法~有人能好心救救我吗？（现在人心应该没有那么好吧）

（第十一次生意）

现在的生意好谈多了，做主子的感觉就是不一样！公司生意也变得的越来越好。商家不只做放贷还可以做其他的生意。

几次生意过后，这种优势就会变得很明显！
但问题是商业活动本身就是一种追逐胜利的游戏。
所以一方一定会想方设法的保持这种优势，这种金钱游戏的玩法最后都是 以营盘的胜利 而告终。

你要明白，现在的女大学生都不傻，而是 被迫的趋利而为 而已！

小时候一直都生活在家教森严的爷爷奶奶家。
从小就接收着传统观念的影响，有很多话听起来好像登不上大雅之堂，但细细想想理确实还是那个理。
小声说句：放贷真的是这个世界上最完美的生意！修改

嵊泗的离岛生活

发表于 2016-12-20 | 分类于旅行日志 |

这是我第一次踏上这个岛屿，你不用知道她的过去，你只要踏上去就能深刻感受她的不同，而我不仅仅是喜欢那的景色，更大的兴趣是她身上的人和事。

离岛随想（一）

发表于 2016-12-20 | 分类于旅行日志 |

没什么人明白自由意味着什么，我也只是在看到别人嘴角泛起笑容的时候，能隐约感受到。

本来只是想出来散散心的，所以并没有内心里走的匆忙。

有时候真的想远离城市，去一个没有人打扰的地方好好生活，没有压力和选择，一起都那么平淡。

我憧憬电影《大河恋》里的生活，不是因为我文艺，而是因为我怀旧，我希望能和老友把酒言欢。

但突然我停住了脚步，想了些许事，又开始往前走。