npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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的如下命令:

  1. prestart 执行gulp对文件进行编译
  2. start 启动

其中启动分为如下阶段:

  1. 环境变量处理
  2. 入口文件处理: 包括路由收集和路由模板文件生成
  3. Master暴露的组件转发处理
  4. 获取webpack配置进行启动

发布

npm publish

运行publish会自动调用如下阶段:

  1. prepublish:调用npm run compile对代码进行编译(因为要发布的代码是编译后的代码)
  2. 发布编译后的lib文件夹
  3. 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

  1. 判断项目根目录下是否存在gulpfile.js
  2. 如果存在使用该配置文件执行compile task
  3. 如果不存在,使用@dwt/boot提供的gulpfile.js来执行compile task
  4. 会在根目录下生成名为lib的编译后的代码文件夹(可用于发布)

功能描述

@dwt/boot作为一个脚手架项目,希望在功能纯净且单一的基础上帮助用户做更多的事,以更好地开发dwt平台的模块或者Master。

下面介绍贯穿在整个运行过程中的几个关键步骤:

环境变量方案

dwt平台的前端环境变量方案是一种给用户自定义环境变量,并且可以在部署时进行替换的一种方案。

在react目录下建立.env文件,以键=值的方式写入环境变量,在启动过程中会与默认环境变量进行合并(默认环境变量文件在@dwt/boot下,名为.default.env,当然用户变量的优先级更高)。

特别需要注意的是,你永远应该配置一个名为API_HOST的环境变量,这是代码运行时访问的API的路径前缀。

主入口生成和路由收集生成

主入口和路由文件,会生成在tmp目录下,有nunjucks模板生成。会经过如下步骤:

  1. 收集路由,根据配置的modules去进行路由收集

    • 注意:如果modules字段为空,表示当前模块也不会被webpack编译进去,这也之前有不同,当前模块用'.'表示,其余模块可以直接用模块名或者模块路径表示,相对于根目录
  2. 路由生成:根据收集路由得到的路由对象,生成路由文件

  3. 主入口文件生成:根据配置的Master属性,将Master和路由文件注入到总入口,生成最终入口文件entry.index.js

组件转发

为了便于Master暴露的组件在模块中使用,而切换Master后不改用各个模块中的代码,所以用@dwt/boot对组件进行转发。

主要是对master中的exportPath指向的文件进行解析,如果是指向一个相对路径的,使用exportPath和相对路径做一定处理(截尾+拼接),生成到tmp/transfer.index.js目录中,最后由@dwt/boot暴露出去。