一个完善的Koa+Webpack+React集成开发环境,实现了多页面应用入口,并附加很多实用组件
- 支持多页面类型的React应用开发
- 实用Koa服务器进行构建,扩展性更强
- 分为开发环境(Dev)和上线(Prod)环境,可以自由选择并进行开发
- 支持React热加载,可以实现CSS及JS的热加载效果
- 附加Postcss工具,可实现Sass语法开发,自动填充CSS3兼容方案及CSS雪碧图的自动化构建
- 使用了CSS-Module技术,实现了样式的复用性和解决了样式污染
##使用的技术
开发目录结构:
├── dist //资源文件目录
├── css //存放css文件
│ ├── components //存放组件相关的css
│ └── common //存放公用的css文件
├── data //存放临时数据文件
├── img //存放图片目录
├── js //存放所有入口的js文件(不要防止其他js)
├── plugins //存放其他非入口的js
│ ├── components //存放组件相关的js
│ └── lib //存放组件相关的js
├── scss //存放scss文件
│ └── components
└── tmpl //存放模板文件
1.安装所需NodeJS模块
进入你该项目文件夹,并在CMD/终端中执行命令安装Node依赖包,这里有一个需要注意的问题,由于webpack中file-loader的图片处理路径无法满足CSS背景图片的路径变化,需要将根目录下的node_bak中的file-loader文件夹替换node_modules中的file-loader文件夹
npm install
2.创建入口及对应js文件
在src开发目录中创建HMTL页面,并在src/dist/js中创建一个同名js即可
3.设置相关配置参数
在./config文件夹中设置webpack.config.dev.js和webpack.config.prod.js文件中的配置
/**
设置默认常用路径
**/
//srcDir为当前开发目录(默认:/src)
const srcDir = path.resolve(process.cwd(), 'src');
//assetsDir为当前建立目录(默认:/assets)
const assetsDir = path.resolve(process.cwd(), 'assets');
//读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中)
const jsEntryDir = path.resolve(srcDir, 'dist/js');
//生成JS的目录地址(默认:)
const jsDir = 'dist/js/';
//生成css的目录地址(默认:)
const cssDir = 'dist/css/';
/**
设置默认模块依赖及是否合并打包等设置
**/
//设置需要排除单独打包的插件
const singleModule = ['react', 'react-dom', 'jquery', 'Raphael'];
//是否合并打包其他组件模块
const libMerge = true;
//需要全局使用的组件,比如jquery,lodash等
const globalValue = {
$: 'jquery'
};
//设置不需要使用的css目录
const excludeCss = ['dist/css/common', 'dist/css/components'];4.开启热加载开发模式
进入你该项目文件夹,并在CMD/终端中执行命令开启开发模式,这时候会显示一个控制台,能够看到项目对应的反馈信息及问题
npm start
5.项目完成后进行打包压缩
进入你该项目文件夹,并在CMD/终端中执行命令执行打包压缩,会在根目录生成一个assets的文件夹,文件夹内为压缩后的项目代码
npm run build
1.PostCss工具
在框架中使用了PostCss的部分工具,主要为
- Precss 可以实现类似sass语法功能,所以该框架支持类似Sass语法的编写,例如:
/* before */
@for $i from 1 to 3 {
.b-$i { width: $(i)px; }
}
/* after */
.b-1 {
width: 1px
}
.b-2 {
width: 2px
}
.b-3 {
width: 3px
}- postcss-easysprites 可以实现图表的自动拼接,例如:
/* before */
.arrowNext {
background-image: url('dist/img/arrow-next.png#elements');
}
.arrowNext:hover {
background-image: url('dist/img/arrow-next_hover.png#elements');
}
.arrowPrev {
background-image: url('dist/img/arrow-prev.png#elements2');
}
.arrowPrev:hover {
background-image: url('dist/img/arrow-prev_hover.png#elements2');
}
/* after */
.arrowNext {
background-image: url(dist/img/elements.png);
background-position: 0 0;
}
.arrowNext:hover {
background-image: url(dist/img/elements.png);
background-position: -28px 0;
}
.arrowPrev {
background-image: url(dist/img/elements2.png);
background-position: 0 0;
}
.arrowPrev:hover {
background-image: url(dist/img/elements2.png);
background-position: -28px 0;
}MIT