在开始之前，提一下两种重要的概念。带JSX的页面组件与通用组件，它们分别放在pages与components目录下，它们具有巨大的转换成本（毕竟JSX会被提取出来转换成wxml, axml, swan或ux文件），还有一种不带JSX的纯JS文件，建议放在common目录, 当然还有一些通用的东西可以通过npm安装，但不要使用那些有JSX的第三方依赖。

开发目录如下

src
   |--components
   |    |--HotelDialog
   |    |     └──index.js  //必须以index.js命名，里面的类名 必须 与文件夹名一样, 如HotelDialog
   |    |--HotelXXX
   |    |--FlightYYY
   |    └── ...
   |--pages
   |    |--hotel
   |    |--flight
   |    |--holiday
   |    |--strategy
   |    └── ...
   |--assets 
   |    |--style
   |--common
   |    |--hotel
   |    |--flight
   |    |--holiday
   |    |--strategy
   |    └── ...
   |--app.js
   |--wxConfig.json
   |--qqConfig.json
   |--quickConfig.json
   |--aliConfig.json
   |--buConfig.json

components目录下为了扁平化管理，以事业部做前端+组件名的方式定义组子目录，目录下面就是index.js, index.scss或index.less。index.js里面必须是React组件，需要显式引入｀import React from "@react"`

components目录下不要使用Fragments来命名子目录，这留给系统用。

pages目录下每个事业部各建一个目录，以事件部的名字命名，里面为index.js 及页面的目录，index.js要引入自己目录的所有页面，页面也以index.js命名，并且里面必须是有状态的React组件（转译器会转换成页面组件。）页面的index.js各种引入通用组件与common目录的依赖

   |--pages
   |    |--hotel
            |--index
            |    └──index.js //目录, import里面所有index.js
            |--page1
            |    |---index.js
            |    └── index.scss
            |--page2
            |    |---index.js
            |    └── index.scss
            |--page3
            |    |---index.js
            |    └── index.scss
            |--about
            |    |---index.js
            |    └── index.scss

common目录下每个事业部各建一个目录，以事件部的名字命名，里面为各种JS文件，它们只是纯业务逻辑，没有JSX，只会经过es67的语法糖转换。

app.js会引入pages每个事件的index.js, 只要稍微分析就得到整个应用全部有效的页面，放到app.json的pages数组中，或快应用的manifest.json的router对象的pages对象中

共享数据的处理，大家都在globalData对象中放一些命名空间对象. globalData不能放函数。大家不要放在其他全局对象上，因此在快应用等个别小程序中，页面跳转时，会清空掉除globalData之外的数据与变量。

qqConfig.json , wxConfig.json这些平台特有的配置项

{
    globalData: {
        flight: {
            xxx:111,222:444
        },
        hotel: {

        }
    }
}

自定义输出目录

nanachi 默认打包目录是dist, 可以在package.json中自定义配置 buildDir 来定义打包目录。

{
    "nanachi": {
        "alias": {
            "@assets": "source/assets"
        },
        "buildDir": "yourDir"
    }
}

#￥压缩打包执行 nanachi build -c 会将项目中css, js进行压缩。

开发目录结构与输出目录指定

自定义输出目录