Skip to content

wanZzz6/autoX-webpack-template

Repository files navigation

autox-template-default

修改自

使用说明

安装

克隆本项目并,在本项目的根目录(与本文文件同一目录)下执行npm install --registry=https://registry.npm.taobao.org

配置

更多信息请参考:http://auto.moly.host/index.html#/

默认以src/index.js文件为源码入口,其将被编译为dist/app.js。此dist/app.js既能以单脚本方式运行,也能以项目方式运行。 以下是一些可能用到的配置项:

  • 项目主入口
    project.json -> main 可以指定项目主入口,当使用运行项目指令,或以项目方式打包成 APK 时,将执行该文件。本模板默认使用dist/app.js为项目主入口。

  • 源码入口和出口
    入口默认为src/index.js,其将被编译为出口文件dist/app.js,可以在webpack.config.js -> config -> entry里进行配置,以默认模板为例,app就是出口文件名,./src/index.js就是入口路径。可以添加多个键值对来生成多个出口,但是只有第一个出口文件会自动上传到手机运行。

// webpack.config.js
const config = {
    entry: {
        app: "./src/index.js",
        // custom1: './src/xxx.js'
        // custom2: './src/xxxx.js'
    }
  • UI 模式
    如果需要使用 UI 模式,需要在webpack.config.js -> compilePlugin -> ui数组里指定,文件名应与出口文件名一致。
    如,上方示例的出口文件名为app,则在ui数组里填app即可将其设为 UI 模式。

    注意:编写UI布局代码时,如需在xml标签内使用模板字符串${xxx}语法,请不要在外层加反引号,此项目模板中配置了-webpack-autojs-loader会自动处理xml标签以及${{}}模板语法,具体可参考index.js.

  • 静态文件

  • AES 加密
    为了保证热更新的文件传输安全,常常需要使用 AES 加密源码,在webpack.config.js -> compilePlugin里设置encode: {key: 16位密钥}就会将出口文件以AES/ECB/PKCS7padding方式进行加密,解密时可参考以下代码

var source = $crypto.decrypt(
    files.read("dist/app.js", "utf8"),
    new $crypto.Key(你的密钥),
    "AES/ECB/PKCS7padding",
    {
        input: "base64",
        output: "string",
    }
)
files.write("dist/main.js", source)
  • 出口类型
    默认使用var输出类型,此类型可直接以单脚本或项目主入口方式启动,但是无法被其他 JS 文件引用(也就是无法 require)。如果你希望出口文件能被引用,比如制作自己的通用模块,可以将webpack.config.js -> output -> libraryTarget设为commonjs2

编译

  • 开发模式
    执行npm run start 会以开发模式进行编译,此模式将一直监听src目录下的文件修改,并即时生成新的编译文件,静态文件会直接复制到 dist 目录。
  • 生产模式
    执行npm run build会以生产模式进行编译,得到一份压缩、混淆处理后的编译文件,此模式不会对src进行修改监听。

运行

首先确保 vscode 安装了 Auto.js-Autox.js-VSCodeExt 插件,然后按下 Ctrl+Alt+P ,输入 autox,选择"开启服务",然后将手机端 autoX 链接到此电脑。
在开发模式下,src 下文件发生变动后会自动根据webpack的配置自动编译,纯js\ts代码文件在webpack里配置部署类型为 rerun,可自动在手机端运行;若项目依赖非代码的静态文件,比如图片,则需要设置部署类型为 deploy,项目编译完成后会自动上传到手机,然后手动点击以项目方式运行。 生成模式下,可在dist 目录的 app.js 上右键"重新运行" 或者将整个dist 文件夹上传到手机以项目的方式运行。

LICENSE

MIT.

About

webpack工程化开发 autoX.js,自动部署运行

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published