kraken.js+react+redux+webpack实践

一.创建kraken 项目

kraken.js 由paypal 公司开源的一个用于快速开发基于Express.js框架应用的快速开发工具, 因为kraken 并没有在Express.js基础上更改多少东西,只是在原来的express基础上补充了一些约定开发的规则, 让开发根据便捷.
注: (kraken.js在express基础上补充了什么,两者之间的区别具体有哪些,这些还有待深入去了解下)

1.安装必备工具
执行命令:sudo npm install -g generator-kraken 

2.创建kraken项目
执行命令: yo kraken
然后,看着提示语,输入一些东西,一个项目就这样创建完毕.



3.运行项目
cd slacker
npm start

如下图所示:


在浏览器访问http:localhost:8000

二.搭建webpack+react

1.配置webpack
(1)webpack.config.js(开发环境)
var path = require('path')
var webpack = require('webpack')


module.exports = {
  entry: {
    index:    ['webpack-hot-middleware/client', './src/modules/app/index.js'],
  },
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js',
    publicPath: '/statics/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel?' + JSON.stringify({presets: ['react', 'es2015','stage-0']})],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json'],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"],
        include: path.resolve(__dirname, "src"),
      },
      {
        test: /\.less$/,
        loaders: ["style", "css", "less"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.less$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "less"],
        include: path.resolve(__dirname, "src"),
      }
    ]
  }
}

(2)webpack.prod.config.js(生产环境)
var path = require('path')
var webpack = require('webpack')

var HtmlWebpackPlugin = require('html-webpack-plugin');
var randomCode = (new Date()).getTime();


var definePlugin = new webpack.DefinePlugin({
  "process.env": { 
     NODE_ENV: JSON.stringify("deveploment")
   }
})

module.exports = {
  devtool: false,
  entry: {
    index: ['./src/modules/app/index.js'],
  },
  output: {
    path: path.join(__dirname, 'public/statics'),
    filename: '[name].js',
    publicPath: '/statics/',
    libraryTarget: "umd"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../../modules/app/views/layout/master.html',
      template: 'modules/app/views/layout/master-template.html',
      body: '<%- body %>',
      code: randomCode,
      hash: true
    }),

  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'react-hot', 'babel?' + JSON.stringify({presets: ['react', 'es2015','stage-0']})],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.json$/,
        loaders: [ 'json'],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.css?$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"],
        include: path.resolve(__dirname, "src"),
      },
      {
        test: /\.less$/,
        loaders: ["style", "css", "less"],
        include: path.resolve(__dirname, "style")
      },
      {
        test: /\.less$/,
        loaders: ["style", "css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "less"],
        include: path.resolve(__dirname, "src"),
      }
    ]
  }
}


2.安装需要的包
(1)安装webpack
npm install webpac --save-dev  --registry=https://registry.npm.taobao.org

(2)安装React库,React已经被分为react和react-dom两个部分
npm install react react-dom --save-dev --registry=https://registry.npm.taobao.org

(3)安装加载器
本项目用到的加载器有babel-loader,css-loader, style-loader
babel-loader 进行转码
css-loader 对css文件进行打包
style-loader 将样式添加进DOM

(4)安装转码负责
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev --registry=https://registry.npm.taobao.org
其中babel-preset-es2015处理ES6,babel-preset-react处理JSX

(5)安装热重载器

开发的时候,实时构建代码,并且实时更新已经加载的代码,即不用手动去刷新浏览器,即可以获取最新的代码并执行

关于热重载,可以使用webdevserver,但是听说定制性很差(这点还没体验),可以使用webpack-dev-middleware进行指定

需要配置entry和output,如前面webpack.prod.config的



在热重载中,文件不是放在硬盘,而是使用了memory-fs 模块放在内存中, 与webpack-dev-middleware配合需要使用到webpack-hot-middleware,在内存中使用时需要为入口文件添加一个'webpack-hot-middleware/client'



同时需要添加相应的热重载插件


至此,js文件的生成已经完成,但是缺少html,一样不能访问,需要使用‘html-webpack-plugin',处理html文件,将html文件复制到内存中


在server文件中引用


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值