UXCore starter kit Powered by Nowa

请先下载安装 Nowa .

• windows
• mac
• linux

或者使用 Nowa 的命令行版本： npm install nowa -g

.
├── abc.json  ------------------------- nowa config file
├── favicon.ico  ---------------------- favicon
├── html  ----------------------------- html folder
│   └── index.html  ------------------- project entry
├── package.json  --------------------- npm config file
├── README.md  ------------------------ readme
└── src  ------------------------------ source folder
    ├── app  -------------------------- project-level source
    │   ├── app.js  ------------------- project-level javascript
    │   ├── app.less  ----------------- project-level style
    ├── components  ------------------- project components
    ├── i18n  ------------------------- i18n folder
    │   ├── en.js
    │   ├── index.js  ----------------- i18n loader
    │   └── zh-cn.js
    ├── images  ----------------------- image folder
    └── pages  ------------------------ page folder
        └── demo  --------------------- some page
            ├── index.js  ------------- entry file
            ├── actions.js  ----------- reflux actions of the page
            ├── store.js  ------------- reflux store of the page
            ├── PageDemo.js  ---------- react view of the page
            └── PageDemo.less  -------- style of the page

1、 请打开 Nowa 工具并将项目拖入到工具界面。

2、 请选择合适的 npm 源地址安装项目所需依赖

大陆用户请选择 taobao 源。点击提交按钮等待依赖安装结束。

3、点击 启动 按钮开启本地服务器并监听文件

启动成功后，可以直接点击 访问 按钮，工具会自动打开浏览器访问目标地址。

• 开发环境

npm start

• 生产环境打包

npm run build

• uxcore 资源打包

npm run lib

更多功能和参数（端口、代理、依赖库、国际化、热构建、https……）

请查看 nowa 的官方文档：

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

项目在本地调试以及打包过程中会输出以下入口文件：

• 如果存在 app/app.js 的话，则输出 app.js。
• 如果在 app/app.js 中引入了样式资源，则输出 app.css。
• 如果存在 pages/page/index.js 的话，则输出 page.js（此处 page 泛指 pages 目录下的任意目录名）。
• 如果在 page.js 中引入了样式资源，则输出 page.css。

对于一个页面，除了引入外部资源外，一般需要引入 app.css、page.css、app.js、page.js 这几个文件。

本地调试服务器并不会向文件系统写入任何文件，请求的资源只存在于内存中。

abc.json 中提供了运行时变量和构建变量以供运行时和构建时进行变量注入。

运行时变量的定义形如：

{
    "vars": {
        "locale": "zh-cn",
        "container": "nw",
        "__LOCAL__": true
    }
}

这里定义的变量将以全局变量的形式，在 nowa server 时注入到代码中。

构建变量的定义形如：

{
    "buildvars": {
        "locale": [ "zh-cn", "en" ],
        "container": [ "dingding", "nw" ]
    }
}

构建变量和运行时变量作用类似，但同一变量允许有多个候选值，构建器将根据不同的候选值对每个 js 生成不同后缀的文件。

例如，以上例子对于 app.js 将生成这些文件：app-zh-cn-dingding.js、app-zh-cn-nw.js、app-en-dingding.js、app-en-nw.js，每个文件中的 locale 和 container 变量分别对应到其后缀所指明的值。

buildvars 会自动包含 vars 中的定义。

当某个变量仅有一个候选值时，将不会添加文件后缀。

具体请参考这里。

脚手架默认引入了以下外部工具库：

React 和 Refulx 的使用，请参考各自的官方文档。

Uxcore 组件库请参考这里。

可通过在 abc.json 中增加相应配置来定制项目所需的 Uxcore，详见 nowa-lib 插件。

src/i18n 目录为国际化文案资源文件存放目录，其中除了 index.js 之外的文件均为国际化语言资源文件。

index.html 中通过请求不同后缀的 js 文件（home-zh-cn.js、home-en.js）来指定当前使用语言。

可以修改 abc.json 中的 options.vars.locale 变量的值来指定当前调试环境使用的语言。

js文件中可使用如下方法来注入国际化文案：

let i18n = require('i18n');
...
i18n("key"[, argv1[, argv2...]])

首先会找到对应的语言资源文件，然后通过 key 对应到文案模板。

如果文案中有 {0}{1} 变量，将使用 argvX 参数进行替换，更详细的使用说明请参考这里。

• 国际化资源文件索引命名规范：
  • 全局公用资源：global.xxx
  • 模块所属资源：moduleName.xxx
  • 页面所属资源：pageName.xxx

我们推荐使用 svg 作为图标解决方案。

require svg 文件路径将直接返回包含这个 svg 的 react component。

let Star = require('./star.svg');
...
render() {
    return (
        <Star className="star"/>
    );
}

在 js 中 require（或在 css 中 url）一个相对路径的图片资源，将返回这个图片内容的 data-uri。

let img = require('./img.png');
...
render() {
    return (
        <img src={img} alt=""/>
    );
}

.abc {
    background-image: url(./img.png);
}

• 请参考 NattyFetch 官方文档。

• 建议使用 es6 进行编码。