支付宝框架UmiJs(五米)_极快的类 Next.js 的 React 应用框架

更新日期: 2018-04-04阅读: 6.8k标签: next

最近有发现了一套dva过后的新的react应用框架--UmiJs(当然也可叫做“优米”或者“五米”),

网址:https://umijs.org/zh-Hans/
github地址:https://github.com/umijs/umi

不知道,对UmiJs这套框架有所了解的小伙伴们,对这套框架有什么看法呢?请留言哦!

也是刚刚了解这套框架,那么废话少说我们来切入主题吧。umi 就是一套零配置,按最佳实践进行开发的前端框架。


UmiJs特性:

1、高性能

    PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical css、preload、hash build、preact 等等,并且,你相同的代码会随着 umi 的改进而不断提升性能。

2、开箱即用

    你只需一个依赖 umi 就可启动开发,而无需安装 react、preact、react-router、eslint、babel、jest 等。

3、多端

    一键切换单页和多页,一份代码同时部署到 cdn、容器、云凤蝶等环境,详见部署文档。

4、扩展性

    umi 的整个生命周期都是插件化的,甚至就是由大量插件组成,比如 http mock、service worker、layout、高清方案等,都是一个个的插件。


UmiJs开发体验

基于 create-react-app 实现更多体验上的优化,比如按需编译(不管有项目多大启动时间都不超过 10s)、dev server 断线重连、配置的校验、自动生效以及提示到行等。


UmiJs的使用:

安装方法:

    用 npm 安装 umi :

npm i umi -g

   或者用 yarn :

yarn global add umi

    然后可以 umi -v 检查版本号: 

umi -v  
umi@1.0.0

创建应用:

创建应用并进入。 

mkdir myapp  
cd myapp

启动 dev 服务器:

umi dev  
  
Compiled successfully!  
You can now view Your App in the browser.  
  Local:            http://localhost:8000/  
Note that the development build is not optimized.  
To create a production build, use npm run build.

创建我们第一个umi页面:

在 pages 目录里新建首页。

echo 'export default () => <div>Index Page</div>' > pages/index.js

如果你是 Window 系统,可以手动新建 pages/index.js,并填入:

export default () => <div>Index Page</div>;

然后在浏览器中打开 http://localhost:8000/,你会看到 Index Page 。

构建应用:

umi build  
  
Compiled successfully.  
File sizes after gzip:  
  52.09 KB  static/umi.2b7e5e82.js  
  186 B     static/__common-umi.6a75ebe1.async.js

构建产物会生成在 dist 目录:

tree ./dist  
  
dist  
├── index.html  
└── static  
    ├── __common-umi.6a75ebe1.async.js  
    └── umi.2b7e5e82.js  
  
1 directory, 3 files

部署:

npm i serve -g  
cd dist  
serve  
  
Serving!  
  
- Local:            http://localhost:5000     
- On Your Network:  http://{Your IP}:5000  
  
Copied local address to clipboard!


这样UmiJS就可以算是上手了。

我们来看一下umi的目录结构:

.
├── dist/                          // 构建产物目录
└── src/                           // 源码目录,可选,把里面的内容直接移到外面即可
    ├── layouts/
    │   └── index.js               // 全局布局
    ├── pages/                     // 页面目录,里面的文件即路由
        ├── .umi/                  // dev 临时目录,需添加到 .gitignore
        ├── .umi-production/       // build 临时目录,会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1,任意命名
        └── page2.js               // 页面 2,任意命名
    ├── global.css                 // 约定的全局样式文件,自动引入,也可以用 global.less
    ├── _routes.json               // 路由配置,和文件路由二选一
├── test/                          // 测试用例放这里
├── .umirc.js                      // umi 配置
├── .webpackrc                     // webpack 配置
└── package.json

一定要记得pages目录是强约定目录哦。小伙伴,有什么要说的呢?谈一下,大家对支付宝这套新出框架“五米”的感想吧?


链接: https://fly63.com/article/detial/588

Next.js,一个非常简洁的 React 应用的服务器端渲染框架

Next.js 有一个提供稳定支持的组织,同时在开源世界也非常的活跃。Next.js 使用简单,代码分离,开箱即用。,初始只加载首页,提升性能,改善 SEO(搜索引擎优化)

为什么我会选择React+Next.js,而不是Vue或Angular?

本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。 对我来说,这是构建用户界面唯一正确的方法,它让我爱上了 React。

next.js使用 antd, 支持 css 和 scss

项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的

域名二级目录 指向 nextjs 应用

应用场景: 考虑到多应用在一个域名下能提高该域名的SEO,所以选择通过域名二级目录形式指向 nextjs应用,这里需要修改 nginx 和 nextjs 配置

Next.js 热更新 Markdown 文件变更

Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈。但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 React 组件,热更新将失效。

安全输入Next.js应用程序使用Prisma/PostgreSQL(SQL注入等)的问题

在Next.js应用程序中,可以通过使用Prisma / PostgreSQL数据库来保护应用程序免受SQL注入等安全漏洞的威胁。以下是如何实现此目标的一些技术解决方案和代码示例:

Next.js 14 正式发布,更快、更强、更可靠!

10 月 26 日,Next.js 正式发布。该版本的主要更新如下:Turbopack:App & Pages Router 通过 5000 个测试,服务端操作(稳定):逐步增强的数据变更

Node.js 新官网为何选用了 Next.js?

近期 Node.js 发布了新网站,带来了全新的外观变化。看其技术选型,也是紧跟潮流,用到了最新的 Next.js App Router 框架,版本 ~14.1.3 这是 Next.js 近期的最新版本了,不过看起来同时也在用 Next.js 的 pages 模式。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!