autoxjs入门-高级开发环境搭建

概述

autoxjs 是继续维护升级的Auto.js 项目,在原来项目的基础上,实现了如下功能:

  • [x] autoxjs 项目工程化:结合webpack vscode插件,开发、编译、打包、部署、混淆、加密一体化 文档资料
  • [x] vscode 插件右键,自动提示操作等下载地址
  • [x] vscode 自动补全、方法注释等, 文档资料
  • [x] 发布新版autoxjs 4.2.1 : 打包插件,运行apk、autox.js下载地址
  • [x] 建设论坛、提供交流社区,交流社区
  • [ ] 建设应用商店
  • [ ] 提供更好的sdk 封装
    下面我主要对工程化、规划范化这块的环境搭建进行讲解:

优酷视频讲解

环境搭建

  1. 你需要安装 nodejs ,安装过程中请注意要 [ 将node添加PATH中 ] 和 安装 npm 这两个选项都要勾选上。(一般的前端工程师都有这个环节)

  2. 安装vscode 并安装 autoxjs开发插件即:Auto.js-VSCodeExt-Fixed 注意是0.3.11 或以上版本。 (ctr+ shift+p 选择autojs 启动服务)

  3. 安装全局安装 webpack: npm i -g webpack webpack-cli --registry=https://registry.npm.taobao.org

  4. 下载本项目 或git clone 项目 git clone https://github.com/kkevsekk1/webpack-autojs.git

  5. cmd 到项目 , 运行命令,安装依赖
    npm install --registry=https://registry.npm.taobao.org

  6. 到这来基本上可以说 开发环境 就完成了,(你还要一部手安装 autoxjs),下面说 这项目的配置文件和开发的形式。

项目开发、编译、打包、部署介绍

  1. work 目录: 这就是我们项目的总目录,即这里面每一个文件夹是一个autoxjs 项目。比如我们 demo,demo1,dy 即为3个项目。
  2. scriptConfig.js 文件: 我们要如何编译项目即在这个文件中配置,打开文件,有注释的可以按照注释改。
  3. header.txt 无关紧要的文件,里面的内容会原封不动的添加到 编译后的js代码头部
  4. 调整好上面 3处内容 就可用编译了我们的项目了
  5. package.json 这个文件规定 看 第6-9行,有两个命令 start 和 build 分别对应开发环境和生成环境的编译,无需修改。只要知道他们 分别对应 npm run start 和 npm run build 。
  6. 运行 npm run start 即开发环境,没每次修改代码,代码会自动编译,并且 scriptConfig.js 中的wath配置为‘rerun‘或‘deploy‘ 那么代码将自动在手机中运行 或自动将重新编译的项目保存到手机中。
  7. dist目录: 运行上面编译命令( start或build),就有编译的结果,编译的结果就 dist目录中,这目录下每一个目录代表的就是一个编译后的autoxjs项目.编译后的目录的名称 可以配置一个前缀,以便和编译前的项目区分(当他们都以项目形式保存手中的时候就很有必要)。
    8.npm run start 这个

编译 dex

  1. 使用工具 的来源。我用这个工具来打包,不打算重复造*了
  2. 安装jre
  3. 安装 auto-cli npm i "@auto.pro/cli" -g
  4. 运行编译命令 auto-cli dex ./dist/demo/main.js
  5. 如果由于愿意写个 webpapck 插件 ,来执行这里几个命令,实现自动化愿意 pull 代码,我没打算对我的代码 编译为dex 再加固,所以没有动力实现这个插件!

autoxjs入门-高级开发环境搭建

上一篇:使用Jasmine和karma对传统js进行单元测试


下一篇:05、Xpath与CSS_selector定位