娜娜奇脚手架
以React方式高效开发小程序
这只是anu的一个扩展,通过实现不同的render,以支持在微信小程序,百度小程序,支付宝小程,快应用,H5, hybird上运行。
安装
npm
npm install nanachi-cli -g
yarn
yarn global add nanachi-cli
使用方式
- nanachi init
<project-name>
创建工程 cd <project-name> && npm i
安装依赖nanachi watch:[wx|bu|ali|quick]
监听构建小程序nanachi build:[wx|bu|ali|quick]
构建小程序- 用微信开发工具打开当中的dist目录,自己在source目录中进行开发
注意:快应用下构建结束后,需要执行以下三步骤
- npm install
- npm run build
- npm run server
详情请见快应用文档
详见 https://rubylouvre.github.io/nanachi/index.html 或 https://github.com/RubyLouvre/anu/tree/master/packages/render/miniapp
nanachi api
const nanachi = ;;/** * compressOption: * { * jpg: * png: * gif: * svg: * } */
自定义loader
用户可以使用nanachi api编译nanachi应用,同时支持自定义预处理loader和后处理loader。
compress压缩模式就是使用后处理loader实现的,链接:https://www.npmjs.com/package/nanachi-compress-loader
我们规定了loader的输入和输出格式
queues: // 需要生成的文件数组,如nanachi中的js文件在微信转义中会同时生成wxml和js文件还有可能生成json文件 code // 生成文件内容 type // 生成文件类型 path // 生成文件相对路径 exportCode // 标准js代码,包含了文件的依赖信息,用于webpack解析文件依赖
nanachi config
自定义loader应用到项目中,有两种方式供选择:
- 在项目根目录下创建nanachi配置文件,nanachi.config.js
// nanachi.config.jsmoduleexports = postLoaders: 'nanachi-compress-loader'
正常运行nanachi命令,即可将自定义配置应用到项目中
npm install nanachi-compress-loader --save-devnanachi build
- 使用nanachi api,自定义编译脚本
// build.jsconst nanachi = ; ;
node build.js