node package manager

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