front-end-toolkit

#front-end-toolkit

前端工程化打包工具

前端工程化

目录结构，同 test 目录结构

源码见：https://github.com/dnxbf321/front-end-toolkit/tree/master/test

目录结构说明

output - 打包后文件存储位置

page - 页面

index - 一个叫 index 的页面，其依赖 widget-a、widget-b

	index.css - index 页面的样式，打包时将自动合并 widget-a.css、widget-b.css 生成新的 index.css，无需在index.css 中声明widget 的依赖
	
	index.hbs - index 页面的模板
	
	index.js  - index 页面的 js，打包时将自动生成 webpack_entry: {index: [‘path/to/index.js’, ‘path/to/widget-a.js’, ‘path/to/widget-b.js’]}

static - 公共静态资源，如图片、js 库（jquery）、reset.css，此目录的资源可以被 page、widget 中引用，声明依赖时，路径相对于 static 目录即可

widget - 组件目录，供 page 引用

widget-a - 一个叫 widget-a 的组件

	widget-a.css - widget-a 的样式
	
	widget-a.hbs - widget-a 的模板
	
	widget-a.js  - widget-a 的 js
	
widget-b - 一个叫 widget-b 的组件

fe.json - 工程的配置文件，代码详见：https://github.com/dnxbf321/front-end-toolkit/blob/master/test/fe.json

fe.json 配置的部分说明

context - 工程根目录位置，即 fe.json 所在的目录。编译程序将使用 path.resolve(process.env.PWD, fe.context) 得到绝对路径。

copy_files - 无需编译处理的文件，source路径相对于 context，成员为字符串时，将拷贝到 output/public 下；成员为 object 时，path 定义 source 路径，dist定义目标目录，dist 路径是相对于 output 目录的，注意拷贝不保留原先的目录结构。

webpack_entry - 默认只分析 page 的依赖，webpack js文件，如若有其他需求，此处声明额外的 entry。

pack_css - 默认只分析 page 的依赖，处理 sass like 文件，若有其他需求，此处声明额外的样式文件。key 为处理后生成的文件名（无需书写后缀.css），value 为 css 文件路径数组，路径相对于 context。

打包

cd path/to/front-end-toolkit
npm link
cd path/to/test
fe build