apicloud-polyfill

简介

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

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

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

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

特性

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

安装

  1. npm i apicloud-polyfill --save

使用

JS类库方式:

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

或 使用 apicloud cli :

  1. apicloud polyfill --project ./

基础

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

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

  1. npm i

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

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

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

  1. # 先在手机 *APPloader* 中与电脑建立连接,再执行下面的npm同步指令
  2. npm run bundle_d_s
  3. # 如果已安装 apicloud-cli,也可以直接使用 apicloud 调用指令
  4. apicloud run bundle_d_s

apicloud-polyfill - 图1

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

指令简介
syncwifi 增量真机同步
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:

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

进阶

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