react/typescript/webpack 命令行工具
功能:
可以支持打包单页面和多页面项目
- 单页面项目的
src
目录下需要有个index.ts
或index.tsx
文件 - 多页面项目的
src
目录下需要有个page
文件夹,page
文件夹下的所有.ts
或.tsx
都是一个页面
优先判断单页面模式,如果单页面条件不成立,则使用多页面模式,如果多页面条件也不成立,则会报错
foe build 支持额外参数
--pretty
: 不压缩代码,方便调试
关于 TypeScript
- 用 https://shakyshane.github.io/json-ts/ 工具可以将 json 转化成 TypeScript 的 interface 定义
关于 foe-common
为了避免一次性加载整个 foe-common
项目,foe-cli
会使用 index-loader
来加载 foe-common
模块,index-loader
功能主要是:
// 在 index-loader 作用下会转化成
- 如果觉得
index-loader
可能转化错误,可以使用INDEX_LOADER_DEBUG
环境变量来查看转化结果,如INDEX_LOADER_DEBUG=yes npm run dev
- 如果需要实时解析(也就是说正在修改 foe-common 中的文件),可以使用
INDEX_LOADER_REALTIME
环境变量来开启实时解析,如INDEX_LOADER_REALTIME=yes npm run dev
TODO
- 支持 mock
- 自动上传图片到静态服务器
- 生成静态资源的映射文件
- Tree Shaking 验证
- 支持 inline 图片
- 根据 tsconfig
compilerOptions.lib
配置,判断浏览器是否支持,不支持需要自动加载对应的脚本。 加载脚本的时候可以使用静态服务器的concat
功能来批量加载需要引入的 polyfill。 - webpack 端口占用后会自动更新,foe-cli 也需要有这个功能
- merge 代码之后自动判断 foe-cli 是否需要重新编译,需要则重新编译并 link