Nowa 极简教程:立即上手 webpack & react 开发生态环境

简介: Nowa 省去了用户研究打包,开发,模拟数据等 N 项变态又无聊的工作。用户可以直接上手写业务代码,不用考虑如何压缩合并代码,如何热加载,如何代理资源等等,如何配置国际化功能等等。

Nowa 省去了用户研究打包,开发,模拟数据等 N 项变态又无聊的工作。用户可以直接上手写业务代码,不用考虑如何压缩合并代码,如何热加载,如何代理资源等等,如何配置国际化功能等等。能偷懒的,我们都帮你做了。

image.png

下载 GUI 工具:

https://nowa-webpack.github.io/

命令行使用:

新项目


使用

可以通过

nowa init <url>

命令来做项目初始化的操作。

如果提示找不到 init 命令,请通过

nowa install init

来安装

nowa init https://github.com/nowa-webpack/template-uxcore/archive/v2.zip

<url>

为项目模板 zip 包下载地址或下载地址的快捷命令,例如可以通过快捷命令达到和以上命令同样的效果:

mkdir test && cd test
nowa init uxcore

主要有以下快捷映射:

h5salt

=>

https://github.com/nowa-webpack/template-salt/archive/master.zip

webuxcore

=>

https://github.com/nowa-webpack/template-uxcore/archive/v2.zip

全部映射可查看这里

{
  "h5": "https://github.com/nowa-webpack/template-salt/archive/v3.zip",
  "salt": "https://github.com/nowa-webpack/template-salt/archive/v3.zip",
  "web": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "uxcore": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "refast": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "no-flux": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "amaze": "https://github.com/nowa-webpack/template-amaze/archive/master.zip",
  "antdmobile": "https://github.com/nowa-webpack/template-antdmobile/archive/master.zip"
}

当回答完一些必要的问题之后,脚手架会开始自动生成和初始化项目。

image.png

等待初始化完毕后,便可直接通过

nowa server

npm start

来启动开发服务器。

参数

nowa init

在初始化新项目时,接受以下候选参数:

  • -f, --force

    是否强制更新模板 如果不给出

    force

    参数,模板将在本地缓存 24 小时,在 24 小时后的第一次执行时自动检查并下载更新

  • -a, --as

    模板路径的别名 如果指定了模板路径的别名,则下次可通过模板路径别名替代完整的模板路径来初始化项目
    例如:

    nowa init https://github.com/nowa-webpack/template-uxcore/archive/master.zip -a ux
    
    

第二次可使用以下命令有同样的效果:

nowa init ux

image.png

新页面


使用

可以通过

nowa init page

命令来做页面初始化的操作。

如果提示找不到 init 命令,请通过

nowa install init

来安装

nowa init page

该命令必须使用在通过

nowa init

创建的项目中,可在项目中的任意目录下执行。

当回答完一些必要的问题之后,脚手架会开始自动生成新页面相关文件(包括 html、js 和 css)。

image.png

等待初始化完毕后,便可直接通过

nowa server

npm start

来启动开发服务器,访问到新建的页面。

参数

nowa init page

在初始化新页面时,接受以下候选参数:

  • -t, --template <url>

    用户指定所使用的项目模板,一般定义在

    abc.json

    options

    属性中,必须给出

  • -f, --force

    是否强制更新模板 如果不给出

    force

    参数,模板将在本地缓存 24 小时,在 24 小时后的第一次执行时自动检查并下载更新

新模块


使用

可以通过

nowa init mod

命令来做模块初始化的操作。

如果提示找不到 init 命令,请通过

nowa install init

来安装

nowa init mod

该命令必须使用在通过

nowa init

创建的项目中,可在项目中的任意目录下执行。

当回答完一些必要的问题之后,脚手架会开始自动生成新模块相关文件(包括 js 和 css)。

image.png

等待初始化完毕后,便可在其他页面或模块中引用新建的模块了。

var TestMod = require('../../components/test-mod');

远程调试


开发服务器的转发配置

nowa server

标配了远程调试的功能,该功能所做的事情是:将开发服务器中(指定路由下)找不到的资源请求转发到指定的服务器。

单规则配置

nowa server

提供

proxy

参数用于配置转发规则,例如有以下配置:

abc.json

{
  "options": {
    "port": 3000,
    "proxy": "http://127.0.0.1:9077/admin"
  }
}

那么对于

http://127.0.0.1:3000/index.htm

的访问,

  • 如果开发服务器存在静态资源

    /index.htm,则返回

    /index.htm

  • 如果开发服务器不存在静态资源

    /index.htm,则转发到

    http://127.0.0.1:9077/admin/index.htm

多规则配置

proxy

参数也可传递一个对象,形如:

abc.json

{
  "options": {
    "port": 3000,
    "proxy": {
      "/api": "http://10.125.55.239:9077",
      "*": "http://127.0.0.1:9077"
    }
  }
}

那么对于

http://127.0.0.1:3000/api/getSomeInfo.json

的访问,

  • 如果开发服务器存在静态资源

    /api/getSomeInfo.json,则返回

    /api/getSomeInfo.json

  • 如果开发服务器不存在静态资源

    /api/getSomeInfo.json,则转发到

    http://10.125.55.239:9077/api/getSomeInfo.json

同样的,对于其他的非

/api

开头的请求(匹配

"*"),则转发到

http://127.0.0.1:9077

代理服务器的规则配置

nowa proxy

是一个功能强大的代理服务器,基于

AnyProxy

做了封装,提供更为灵活的规则逻辑配置。

如果提示找不到 proxy 命令,请通过

nowa install proxy

来安装

nowa proxy

参数列表

nowa proxy

接受以下候选参数:

  • --mappings

    代理映射配置

  • -r, --rule <path>

    规则定义文件路径,规则定义文件将会覆盖代理映射配置

  • -t, --throttle <throttle>

    模拟网络限速(kb/s)

  • -s --silent

    不输出日志到终端

mappings

中每条规则定义如下:

"<METHOD> //<HOSTNAME>[:<PORT>]/[PATH]": "//<HOSTNAME1>[:<PORT1>]/[PATH1]"

其中左边为筛选表达式,右边为目标表达式

  • METHOD

    请求方法,仅可用于筛选,可选值

    GET | POST | *

  • HOSTNAME

    请求域名,用于筛选和目标,两边必须都给出

  • PORT

    请求端口,用于筛选和目标,若在目标表达式中未给出则仍维持筛选表达式中的值,若在筛选表达式中未给出则不对端口做限定

  • PATH

    请求路径,用于筛选和目标,其中小括号括起的部分映射后将拼接到

    PATH1

    之后

例如有以下配置:

abc.json

{
  "options": {
    "port": 3000,
    "mappings": {
      "GET //localhost:3000/(admin/meeting/mobile/*.json)": "//a-work.alibaba-inc.com:443"
    }
  }
}

则对于

https://localhost:3000/admin/meeting/mobile/apply/GetList.json

的请求将被转发到

https://a-work.alibaba-inc.com/admin/meeting/mobile/apply/GetList.json

UXCO

http://uxco.re/

image.png
image.png

React 组件使用文档:

http://uxco.re/components/button/

image.png
image.png

0. 为什么我们需要 UXCore?

UXCore 是一个基于 React 的 PC UI 套件库,兼容 IE8+。http://uxco.re/

阿里巴巴信息平台是负责整个阿里巴巴集团智能办公系统的团队,涉及非常多的企业业务系统,包括薪酬、人力、财务、行政、IT 等等,在这些系统中产生了大量的表格、表单和图表的交互场景,这里面有很多重复配置的地方,也有很多定制变化的地方,目前业界的这一方面还没有能够完全满足这一方面的解决方案,因此有了 UXCore。

UXCore 要解决的核心问题,就是方便高效地产出表单、表格,同时提供足够强大的定制能力,使用户可以对组件的每一个渲染部分进行修改,从而满足各种不同种类的业务场景。

为了实现核心的目标,我们和 UED 团队积极合作,充分收集业务场景和进行视觉优化,在这个过程我们产出了一系列的简单易用的基础组件,用于构建页面的其他部分。目前信息平台的新系统都在使用 UXCore 进行承载,我们也很愿意将我们已经成熟的解决方案分享出来,帮助更多的企业系统开发者解决他们开发上的痛苦,同时也寄希望于依靠社区的反馈,可以让 UXCore 走的更好。

1. UXCore 有哪些特性。

1.1 丰富的组件

超过 35 个常用基础组件用来构建你的系统业务,涵盖大部分常用功能

1.2 专注于企业应用

图2:UXCore 致力于产出方便易用、功能强大且高度可定制的表单、表格、布局组件。'

  • 表单内置 10 余种常用表单域可以直接使用。

  • 表格除了基础功能外,还支持折叠展开二级面板、树形结构、行内编辑等复杂场景。

  • 布局支持传统的左右自适应布局和栅格布局,轻松搞定页面排版。

  • 除了内置的功能外,表单、表格还有一套简易地定制体系,随时可以在业务中为组件注入更强大的力量。

1.3 全面的国际化支持

所有组件的内置文案支持国际化,大部分文案用户可以主动设置。

1.4 可以定制的主题

我们默认提供了两套主题供使用,这两套主题也同时在我们的系统中使用,如果你不喜欢我们的主题,你也可以使用我们的在线定制工具定制你的主题,我们目前开放了所有颜色的定制,未来可能会开放更多的定制点。

1.5 按需使用

UXCore 的每个组件都是单独项目维护的,并且也会单独发布于 npm,因此如果你不喜欢引用 UXCore 的大全包,你也可以单独引用独立的组件使用。同时,修改 UXCore 原有的样式也十分简单,只需修改类名前缀(prefixCls),即可定制属于自己的 UXCore 组件风格。

1.6 提供项目级的建议和支持

如果你苦于搭建使用 React 和 UXCore 的项目环境,可以参考我们的

starter kit,在这里我们给出了团队在众多项目实践总结出的统一解决方案(NOWA),供你参考。

2. UXCore 正在做的事情

2.1 更加值得信赖

为了保证后续迭代和社区贡献的质量,我们会积极地接入代码风格校验和持续集成测试,目前我们的方案已经确定,正在向所有的组件进行推广。

2.2 可视化页面搭建

通过在线可视化的页面,通过拖拽和简单配置来实现简单交互页面的搭建,同时输出代码,用以后续更改和添加代码。

2.3 持续的功能增强

借助社区和团队自身的力量,UXCore 会在现有基础上优化使用体验,增强组件功能,添加更多常用组件来满足不同场景的需求。

3. 链接

相关文章
|
1月前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
20 4
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
24 0
|
3月前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
45 0
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
53 0
|
3月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
56 0
|
2天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
6天前
|
前端开发 API 开发者
React这些新特性在开发效率上有哪些改进
【4月更文挑战第18天】React 18 提升开发效率,引入新Root API `createRoot`优化挂载,支持渐进式升级,减少迁移成本。新增性能工具如Profiler API和Concurrent Mode,自动化批处理提高性能,减少重渲染。服务器组件优化加载速度,减轻客户端负担。开发者可更高效构建和优化React应用。
71 6
|
18天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
15 0
|
25天前
|
JSON API 网络架构
FastAPI+React全栈开发13 FastAPI概述
FastAPI是一个高性能的Python Web框架,以其快速编码和代码清洁性著称,减少了开发者错误。它基于Starlette(一个ASGI框架)和Pydantic(用于数据验证)。Starlette提供了WebSocket支持、中间件等功能,而Pydantic利用Python类型提示在运行时进行数据验证。类型提示允许在编译时检查变量类型,提高开发效率。FastAPI通过Pydantic创建数据模型,确保数据结构的正确性。FastAPI还支持异步I/O,利用Python 3.6+的async/await关键词和ASGI,提高性能。此外,
35 0