apicloud-polyfill

简介

apicloud-polyfill,是 APICloud 为切实提高前端开发者的混发开发体验而推出的一个脚手架. 借助 apicloud-polyfill ,前端开发者可以直接使用最新的 es6,es7语法,在 JS 层以模块化的方式,高效优雅地开发APICloud 应用.

开源地址: https://github.com/apicloudcom/apicloud-polyfill

APPLoader 下载: http://docs.apicloud.com/Download/download#apploader

注意: apicloud-cli 0.2.0 以上版本及其衍生工具, 已全面支持 apicloud-polyfill,可直接在 命令行/终端 安装使用.

特性

• 直接使用最新的 es6 , es7 JS 语法,打破前端开发与原生开发次元壁
• 模块式前端开发,更友好的混合开发体验
• 自由安装 npmjs 上各类标准模块,海量功能,呼之即来
• 开放的 webpack, bable 配置,自由定制与集成其他业务工作流
• 与 APICloud CLI 命令行工具无缝融合,混合开发更加智能高效

安装

npm i apicloud-polyfill --save

使用

JS类库方式:

import Polyfill from "apicloud-polyfill"
Polyfill({project:"./"})

或 使用 apicloud cli :

apicloud polyfill --project ./

基础

1.请保证项目是一个有效的APICloud项目,即根目录必须存在 config.xml 文件;

2.项目 polyfill 化以后,请先在项目根目录执行以下命令,以初始化项目:

npm i

3.如果想体验 polyfill 自带的时钟示例,请先执行以下命令安装 momentjs 库:

# web开发中,一般使用--save-dev来保存依赖,仅供调试环境使用.
npm i moment --save-dev

4.可以在 config.xml 中,将 content 字段修改为 ClockShow.html,来快速体验基于 es6 的时钟实例:

# 先在手机 *APPloader* 中与电脑建立连接,再执行下面的npm同步指令
npm run bundle_d_s

# 如果已安装 apicloud-cli,也可以直接使用 apicloud 调用指令
apicloud run bundle_d_s

5.polyfill 化以后,项目将自动支持一下 npm 指令:

指令 | 简介 ---- | --- sync | wifi 增量真机同步 bundle | 预编译 es6/es7 js文件 bundle_s | 预编译 es6/es7 js文件,然后进行wifi 增量真机同步 bundle_d | 以debug模式,预编译 es6/es7 js文件,此时会产生对应的 *.map.js 文件,便于在浏览器中调试 bundle_d_s | 以debug模式,预编译 es6/es7 js文件,然后进行wifi 增量真机同步

6.预编译的逻辑是: src/components 目录用于存放可复用模块,不直接预编译; src/pages 目录,用于存放直接用于某个window或frame的js入口文件,都会编译为同名的js文件;编译后的文件,存放于 lib/ 目录下

7.混合开发,容易受到js页面缓存的干扰,可使用类似下面的加时间戳的策略来在html中动态插入js:

<script>
var script = document.createElement('script')
script.src = "./lib/ClockShow.js?ver="+(Date.now() / 1000 | 0)
document.body.appendChild(script)
</script>

进阶

• Get Started with Webpack
• babeljs
• 自定义真机同步时想要忽略的文件或目录

警告: 在您对 webpack , babel 和 npm 足够熟悉之前,请不要手动修改项目 polyfill 化后产生的 webpack.config.js , package.json 或 .babelrc 文件