序
本文基于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