dwt-front-boot
v1.0.0
Published
boot for run react application
Downloads
23
Readme
开发(@dwt/boot)
安装依赖
npm install
安装的依赖包含了webpack,babel,react等@dwt/boot必须的依赖,可以在package.json
中进行查看。
运行配置及配置项说明
运行
npm start
运行时会自动调用package.json的如下命令:
prestart
执行gulp对文件进行编译start
启动
其中启动分为如下阶段:
- 环境变量处理
- 入口文件处理: 包括路由收集和路由模板文件生成
- Master暴露的组件转发处理
- 获取webpack配置进行启动
发布
npm publish
运行publish会自动调用如下阶段:
- prepublish:调用
npm run compile
对代码进行编译(因为要发布的代码是编译后的代码) - 发布编译后的lib文件夹
- postpublish:发布完成后调用
npm run clean
去执行rimraf lib
删除lib文件夹
构建
npm run build
通过package.json中的配置的scripts命令,会去执行dwt-front-boot dist
,执行阶段和start相同,只是生成的代码是适合部署到生产环境的代码。
通过package.json中的配置的scripts命令,会去执行dwt-front-boot compile
:
- 判断项目根目录下是否存在
gulpfile.js
- 如果存在使用该配置文件执行
compile task
- 如果不存在,使用
@dwt/boot
提供的gulpfile.js
来执行compile task
- 会在根目录下生成名为lib的编译后的代码文件夹(可用于发布)
功能描述
@dwt/boot作为一个脚手架项目,希望在功能纯净且单一的基础上帮助用户做更多的事,以更好地开发dwt平台的模块或者Master。
下面介绍贯穿在整个运行过程中的几个关键步骤:
环境变量方案
dwt平台的前端环境变量方案是一种给用户自定义环境变量,并且可以在部署时进行替换的一种方案。
在react目录下建立.env文件,以键=值
的方式写入环境变量,在启动过程中会与默认环境变量进行合并(默认环境变量文件在@dwt/boot下,名为.default.env
,当然用户变量的优先级更高)。
特别需要注意的是,你永远应该配置一个名为API_HOST
的环境变量,这是代码运行时访问的API的路径前缀。
主入口生成和路由收集生成
主入口和路由文件,会生成在tmp目录下,有nunjucks模板生成。会经过如下步骤:
收集路由,根据配置的modules去进行路由收集
- 注意:如果modules字段为空,表示当前模块也不会被webpack编译进去,这也之前有不同,当前模块用'.'表示,其余模块可以直接用模块名或者模块路径表示,相对于根目录
路由生成:根据收集路由得到的路由对象,生成路由文件
主入口文件生成:根据配置的Master属性,将Master和路由文件注入到总入口,生成最终入口文件
entry.index.js
组件转发
为了便于Master暴露的组件在模块中使用,而切换Master后不改用各个模块中的代码,所以用@dwt/boot
对组件进行转发。
主要是对master中的exportPath指向的文件进行解析,如果是指向一个相对路径的,使用exportPath和相对路径做一定处理(截尾+拼接),生成到tmp/transfer.index.js
目录中,最后由@dwt/boot暴露出去。