用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 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 如何打包Nuget给其他人 创建空白的spec对空白spec进行修改创建简单的库批量创建不同平台 dll 可以给不同的需要打包

本文告诉大家,如果自己有做一些好用的库,如何使用 Nuget 打包之后上传,分享给大家。

741
来自专栏.NET技术

NuGet的使用和服务搭建

   最近部门,在开发的时候遇到一个问题,现在有项目A B C三个项目,项目B和C分别提供了组件库由项目A直接引用。那么每次开打项目A获取最新后,同时还得打开项...

1662
来自专栏实战docker

安装Genymotion模拟器运行Android studio的工程

在Genymotion上运行app的套路: 1.假设sdk的安装路径是”D:\software\Android”,请把”D:\software\Android\...

19610
来自专栏葡萄城控件技术团队

Asp.Net MVC4入门指南(1): 入门介绍

前言 本教程将为您讲解使用微软的Visual Studio Express 2012或Visual Web Developer 2010 Express Ser...

1886
来自专栏林德熙的博客

高效率工具

btsync 是分布式网盘,里面可以存放任意内容,我就使用他来分享工具,本文的工具都提供btsync分享。如何安装参见这篇博客 因为百度分享经常失败,所以使用b...

1111
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(14)---文件操作

你可以将数据从Spread中存到几种不同类型的文件中或者可以在Spread中打开几种不同类型的数据文件。通过使用相应的代码,你可以将整个控件,某个特定的表单,或...

1846
来自专栏林德熙的博客

win10 uwp 上传Nuget 让别人用我们的库 Nuget下载打包Nuget上传命令行使用Nuget

我们的开发经常使用别人的dll,那么我们需要每次都从网上下载,然后复制到我们的项目, 而不知道我们的dll是否安全? 当我们的库更新的时候,我们又需要从网上搜索...

1151
来自专栏IT米粉

我的Markdown的利器——Markdown Here、有道云笔记、iPic

Markdown逐渐成为大家文章编辑的首选,这里推荐两个比较冷门的Markdown工具。 用什么当做Markdown的主力工具? 网上有很多人推荐的Markdo...

3234
来自专栏SeanCheney的专栏

Python模拟登陆 —— 征服验证码 7 京东

登录界面 京东的登录表单设置了许多隐藏字段,如下所示: 隐藏字段 所以都要获取下来。 同样也是输错三次之后出现authcode。 验证码 import requ...

37811
来自专栏DeveWork

为Options Framework主题后台框架添加后台侧边栏

Options Framework是一款WordPress后台框架,在《WordPress主题后台选项开发框架 Options Framework 介绍》一文中...

18910

扫码关注云+社区