1 | # 娜娜奇脚手架
|
2 |
|
3 | > 以React方式高效开发小程序
|
4 |
|
5 | 这只是anu的一个扩展,通过实现不同的render,以支持在微信小程序,百度小程序,支付宝小程,快应用,H5, hybird上运行。
|
6 |
|
7 | ## 安装
|
8 |
|
9 | npm
|
10 | ```sh
|
11 | npm install nanachi-cli -g
|
12 | ```
|
13 |
|
14 | yarn
|
15 | ```sh
|
16 | yarn global add nanachi-cli
|
17 | ```
|
18 |
|
19 | ## 使用方式
|
20 | 1. nanachi init `<project-name> ` 创建工程<br />
|
21 | 2. `cd <project-name> && npm i ` 安装依赖<br />
|
22 | 3. `nanachi watch:[wx|bu|ali|quick]` 监听构建小程序<br />
|
23 | 4. `nanachi build:[wx|bu|ali|quick]` 构建小程序<br />
|
24 | 5. 用微信开发工具打开当中的dist目录,自己在source目录中进行开发<br />
|
25 |
|
26 | 注意:快应用下构建结束后,需要执行以下三步骤
|
27 | 1. npm install <br />
|
28 | 2. npm run build <br />
|
29 | 3. npm run server <br />
|
30 | 详情请见快应用文档
|
31 |
|
32 | 详见 https://rubylouvre.github.io/nanachi/index.html 或 https://github.com/RubyLouvre/anu/tree/master/packages/render/miniapp
|
33 |
|
34 | ![image](https://user-images.githubusercontent.com/190846/45038189-53f44a80-b093-11e8-9ecb-a4080f21b262.png)
|
35 |
|
36 | ## nanachi api
|
37 | ```javascript
|
38 | const nanachi = require('nanachi-cli');
|
39 | nanachi({
|
40 | /**
|
41 | * @Boolean
|
42 | * 是否使用watch模式,默认值:false
|
43 | */
|
44 | watch,
|
45 | /**
|
46 | * @Enum ['wx', 'ali', 'bu', 'tt', 'quick']
|
47 | * 平台,默认值:wx
|
48 | */
|
49 | platform,
|
50 | /**
|
51 | * @Boolean
|
52 | * 是否使用线上beta核心库,默认值:false
|
53 | */
|
54 | beta,
|
55 | /**
|
56 | * @Boolean
|
57 | * 是否使用最新schnee-ui,默认值:false
|
58 | */
|
59 | betaUi,
|
60 | /**
|
61 | * @Boolean
|
62 | * 是否使用压缩模式,默认值:false
|
63 | */
|
64 | compress,
|
65 | /**
|
66 | * @Object
|
67 | * 压缩图片参数(压缩率等)
|
68 | */
|
69 | compressOption,
|
70 | /**
|
71 | * @Boolean
|
72 | * 是否是huawei平台,默认值:false
|
73 | */
|
74 | huawei,
|
75 | /**
|
76 | * @Array
|
77 | * 自定义预处理loaders,默认值:[]
|
78 | */
|
79 | prevLoaders,
|
80 | /**
|
81 | * @Array
|
82 | * 自定义后处理loaders,默认值:[]
|
83 | */
|
84 | postloaders,
|
85 | /**
|
86 | * @Array
|
87 | * 自定义添加webpack module.rules规则,默认值:[]
|
88 | */
|
89 | rules,
|
90 | /**
|
91 | * @Array
|
92 | * 自定义webpack插件,默认值:[]
|
93 | */
|
94 | plugins,
|
95 | /**
|
96 | * @function complete
|
97 | * 解析完成回调
|
98 | * (err, result) => { }
|
99 | * err: 错误
|
100 | * result: webpack打包信息
|
101 | */
|
102 | complete
|
103 | });
|
104 | /**
|
105 | * compressOption:
|
106 | * {
|
107 | * jpg: {} // 具体参考 https://github.com/imagemin/imagemin-mozjpeg/blob/master/readme.md
|
108 | * png: {} // 具体参考 https://github.com/imagemin/imagemin-optipng/blob/master/readme.md
|
109 | * gif: {} // 具体参考 https://github.com/imagemin/imagemin-gifsicle/blob/master/readme.md
|
110 | * svg: {} // 具体参考 https://github.com/imagemin/imagemin-svgo/blob/master/readme.md
|
111 | * }
|
112 | */
|
113 | ```
|
114 |
|
115 | ## 自定义loader
|
116 |
|
117 | 用户可以使用nanachi api编译nanachi应用,同时支持自定义预处理loader和后处理loader。
|
118 |
|
119 | compress压缩模式就是使用后处理loader实现的,链接:https://www.npmjs.com/package/nanachi-compress-loader
|
120 |
|
121 | 我们规定了loader的输入和输出格式
|
122 |
|
123 | ```javascript
|
124 | {
|
125 | queues: // 需要生成的文件数组,如nanachi中的js文件在微信转义中会同时生成wxml和js文件还有可能生成json文件
|
126 | [{
|
127 | code, // 生成文件内容
|
128 | type, // 生成文件类型
|
129 | path // 生成文件相对路径
|
130 | }],
|
131 | exportCode // 标准js代码,包含了文件的依赖信息,用于webpack解析文件依赖
|
132 | }
|
133 | ```
|
134 |
|
135 | ## nanachi config
|
136 |
|
137 | 自定义loader应用到项目中,有两种方式供选择:
|
138 |
|
139 | 1. 在项目根目录下创建nanachi配置文件,nanachi.config.js
|
140 | ```javascript
|
141 | // nanachi.config.js
|
142 | module.exports = {
|
143 | postLoaders: ['nanachi-compress-loader']
|
144 | }
|
145 | ```
|
146 | 正常运行nanachi命令,即可将自定义配置应用到项目中
|
147 | ```sh
|
148 | npm install nanachi-compress-loader --save-dev
|
149 | nanachi build
|
150 | ```
|
151 |
|
152 | 2. 使用nanachi api,自定义编译脚本
|
153 | ```javascript
|
154 | // build.js
|
155 | const nanachi = require('nanachi-cli');
|
156 |
|
157 | nanachi({
|
158 | platform: 'ali',
|
159 | postLoaders: ['nanachi-compress-loader']
|
160 | });
|
161 | ```
|
162 | ```sh
|
163 | node build.js
|
164 | ```
|