用webpack配置Riot Redux工程

名词介绍

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块。

Riot是一个类似React的微型 UI 库,具体可以见【微型UI库Riot介绍】

Redux 是 JavaScript状态容器,提供可预测化的状态管理。

配置项目

1.首先创建package.json文件

mkdir riot-redux
cd riot-redux
npm init

2.安装

给package.json添加依赖描述

...
"scripts": {
        "dev": "webpack-dev-server"
    },
...
"dependencies": {
        "babel-core": "^6.3.17",
        "babel-loader": "^6.2.0",
        "babel-preset-es2015": "^6.3.13",
        "redux": "^3.5.2",
        "redux-thunk": "^1.0.2",
        "riot": "^2.3.18",
        "tag-loader": "^0.3.0",
        "webpack": "^1.13.0",
        "webpack-dev-server": "^1.14.1"
    }
npm install

3.配置

每个webpack项目下都有一个 webpack.config.js ,它的作用如同gulp的gulp.js或者fis3的fis-conf.js ,就是一个配置项,告诉 webpack 它需要做什么。

module.exports = {
    // 页面入口文件配置
    entry: './src/index.js',

    // 入口文件输出配置
    output: {
        path: __dirname,
        filename: 'bundle.js' // filename和html里面的文件要对应
    },
    module: {
        // 加载器配置
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
        }, {
            test: /\.tag$/,
            loader: 'tag',
            exclude: /node_modules/
        }]
    }
};

到这一步项目已经基本配置好了。我们可以写一个helloworld来试试

创建文件index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>RiotJS and Webpack</title>
  </head>
  <body>
      <helloworld></helloworld>
    <script src="bundle.js" charset="utf-8"></script>
  </body>
</html>

这里的bundle.js和webpack.config.js里面的output.filename是对应的

新建src目录并创建文件index.js

var riot = require('riot');
var redux = require('redux');

// 引入helloworld.tag
require('./tags/helloworld.tag');

var reducer = function(state={
    title: '欢迎进入Riot-Redux的世界!'
}, action) {
    switch (action.type) {
        case 'CHANGE_TITLE':
            return Object.assign({}, state, {
                title: action.data
            });
            break;
    }
    return state;
};

var store = redux.createStore(reducer);

riot.mount('*', {
    store
});

在src目录下创建tags目录并创建helloworld.tag

<helloworld>
    <h1>{this.opts.store.getState().title}</h1>
    <button type="button" name="button" onclick="{changeTitle}">变化</button>

    <script>
        changeTitle() {
            this.opts.store.dispatch({type:'CHANGE_TITLE',data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'][Math.floor(Math.random()*7)]});
        }
    </script>
</helloworld>

接下来使用命令启动项目

## 入口按上面的package.json里面配置了script,可以直接运行
npm run dev
## 如果没有配置那就配置一下。

webpack-dev-server的默认端口是8080,所以直接访问http://localhost:8080 即可

修改代码不需要重启服务很方便

相关资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑白安全

Windows下更改Mac地址

在桌面上的“网上邻居”图标上单击右键,选择“属性”,在弹出的“网络连接”的对话框中,在“本地连接”图标上单击右键,选择“属性”,会弹出一个“本地连接属性”的对话...

1233
来自专栏NodeJs C++ Addon

NodeJs —— 在Visual Studio中开发C++插件之环境配置

     最新版地址:  https://www.nasm.us/pub/nasm/releasebuilds/2.13.03/

1356
来自专栏尚国

SELinux初学者指南

SELinux(Security Enhanced Linux)是美国国家安全局2000年发布的一种高级MAC(Mandatory Access Control...

592
来自专栏C/C++基础

Linux下离线手动下载安装C++开发环境

Linux下我们习惯了使用软件包管理器来安装我们需要的软件,比如Red Hat公司的Fedora、RHEL(Red Hat Enterprise Linux)和...

1262
来自专栏Java成神之路

Eclipse插件开发_异常_01_java.lang.RuntimeException: No application id has been found.

通出,在修改了程序中的某个插件(如添加一个扩展等)后,没有引入包含该扩展点的插件,就直接通过产品配置编辑器的界面运行程序,这时就会发生此异常。

834
来自专栏用户2442861的专栏

linux下jsoncpp的编译和测试使用

http://blog.csdn.net/ljp1919/article/details/48319779

643
来自专栏阮一峰的网络日志

npm scripts 使用指南

Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。 本文介绍如何使用 npm 脚本(npm scripts)。 ? 一、什么是 np...

3217
来自专栏cloudskyme

三步学会用spring开发OSGI——(第二步:工程篇)

在上面已经配置了sts及virgo的环境,并且能够成功的运行virgo服务器了。接下来我们来用sts建几个工程。 我们模拟的是一个注册的例子,在我们实际的案例中...

3827
来自专栏Android随笔

上传library到Jcenter遇到的问题总结

我本地安装的JDK版本是:1.6.0_43,后来换成:1.7.0_79 ,解决了这个问题。

472
来自专栏三木的博客

ls命令实现分析

###一、ls命令的功能分析 使用man ls命令查看ls命令手册(功能描述和主要选项摘录如下): List information about the ...

2048

扫码关注云+社区