requirejs结合text.js及css.js等插件实现模块依赖开发（打包案例）
序
本文基于requirejs结合text插件实现模块化（打包案例） 的基础上，加入了css样式的导入与打包功能。具体案例如下：
css.js、css-build.js、normalize.js下载
下载地址：https://github.com/guybedford/require-css
bower下载命令：
$ bower install require-css在下载后的bower_components\require-css 路径下能找到他们3个js文件。
项目目录
打包前：
配制文件
config.js
requirejs.config({
baseUrl: './src/js', //require依赖根目录
paths: {
jquery: '../../lib/jquery/dist/jquery',
text: '../../lib/text/text',//为text.js文件路径起别名
css: '../../lib/require-css/css', //css.js插件别名
'css-builder': '../../lib/require-css/css-builder', //样式打包时需要
normalize: '../../lib/require-css/normalize' //样式打包时需要
}
});build.js
({
appDir: '../src', //需要打包的目录
baseUrl: './js', //require依赖根目录
dir: '../build', //打包输出路径
mainConfigFile: './config.js', //依赖关系配制文件
name: 'app' //需要打包的模块
})第三方文件
本块内容请自行下载并放置到该目录下。
开发源文件src
js/app.js
var modules = [
'jquery',
'text!../views/teacher.html',
'text!../views/student.html',
'css!../css/teacher.css',
'css!../css/student.css'
];
require(modules, function ($, teacher, student) {
var isChange = false,
box = $('#box');
box.html(teacher);
$('#btn').click(function () {
if (isChange) {
box.html(teacher);
} else {
box.html(student);
}
isChange = !isChange;
});
});views/teacher.html
<div class="teacher">
<h2 class="title">老师模块h2>
<ul class="list">
<li><span>姓名：span>娄笙悦li>
<li><span>年龄：span>30li>
<li><span>性别：span>男li>
ul>
div>views/student.js
<div class="student">
<h2 class="title">学生模块h2>
<ul class="list">
<li><span>姓名：span>张三疯，<span>年龄：span>18，<span>性别：span>男li>
<li><span>姓名：span>王五星，<span>年龄：span>20，<span>性别：span>男li>
<li><span>姓名：span>王翠翠，<span>年龄：span>19，<span>性别：span>女li>
ul>
div>
css/teacher.css
.teacher .title {
color: red;
font-size: 36px;
}
.teacher .list {
color: orange;
}css/student.css
.student .title {
color: blue;
font-size: 30px;
}
.student .list {
color: green;
}入口文件
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs实现模块化开发title>
head>
<body>
<h1>requirejs实现模块化开发h1>
<button id="btn">切换模块button>
<div id="box">div>
<script src="lib/requirejs/require.js" data-main="main.js">script>
body>
html>main.js
var debug = true;
if (debug) {
require(['./config/config', './src/js/app']);
} else {
require(['./config/config', './build/js/app']);
}
r.js打包项目
r.js安装
$ npm install -g requirejsr.js打包命令
在根目录下右键打开git工具并执行：
$ r.js -o config/build.js打包后需要修改main.js和config.js
打包后的项目目录：
将main.js的debug改为false;
将config.js的配置项baseUrl改为‘./build/js’