autojs的nodejs打包成品app经验分享
作者:牙叔教程
用nodejs写脚本, 下面这九步你都要做
第一: vscode安装插件 ESLint
为什么要安装eslint?
因为 eslint 可以帮助你找到代码中的各种bug, 尤其是像autojs这种写脚本的, java和nodejs混合写的代码,
指不定那个类没有写全类名, 只写了类名, 打包以后就会报错, 或者闪退
安装eslint依赖
npm i -D babel-loader @babel/core @babel/preset-env
根目录增加 eslint 配置文件 .eslintrc.json , 看清楚, 文件名最前面有英文句号
{ "env": { "browser": true, "commonjs": true, "es2021": true, "node": true }, "extends": "eslint:recommended", "overrides": [], "parserOptions": { "ecmaVersion": "latest" }, "globals": { "android": "readonly", "com": "readonly", "$autojs": "readonly", "androidx": "readonly" } }
根目录增加 eslint 忽略检查某些文件, 文件名是: .eslintignore
dist/bundle.js
第二: 使用 babel 把es6转成es5
webpack.config.js 增加 babel 配置
module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, ], },
根目录增加文件 .babelrc, 看清楚, 前面有点号
{ "presets": ["@babel/preset-env"] }
第三 可以复制我的 webpack 配置文件
webpack.config.js
const webpack = require("webpack"); const TerserWebpackPlugin = require("terser-webpack-plugin"); module.exports = { mode: "production", entry: "./main.js", output: { filename: "bundle.js", }, target: "node", externals: { ui: "commonjs ui", rhino: "commonjs rhino", lang: "commonjs lang", toast: "commonjs toast", datastore: "commonjs datastore", axios: "commonjs axios", app: "commonjs app", color: "commonjs color", image: "commonjs image", device: "commonjs device", clip_manager: "commonjs clip_manager", }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, ], }, plugins: [ new webpack.DefinePlugin({ android: "android", java: "java", $java: "$java", $autojs: "$autojs", }), ], optimization: { minimize: true, minimizer: [ new TerserWebpackPlugin({ extractComments: false, test: /.js(?.*)?$/i, terserOptions: { output: { preamble: '"nodejs ui";', }, toplevel: true, mangle: false, }, }), ], }, };
在 optimization 这个字段中, 有一个 mangle 是用来控制压缩变量的名字的, 就是把长长的变量名, 改成短短的变量名; 设置为 true 才会有效果;
我设置的是false, 因为设置为 true 的话, 我用 defineClass 定义的控件类就找不到了
await $java.defineClass(NoScrollViewPager, { packageName: "org.yashu" });
如果你没有定义控件类的话, 建议设置为true
还有一个字段是
preamble: '"nodejs ui";',
这个字段的作用是, 在bundle.js的文件头第一行, 添加 nodejs ui;
第四: package.json 增加 build 命令
"scripts": { "build": "webpack --config webpack.config.js" },
如果你没装 webpack, 那就先安装 webpack
npm install webpack webpack-cli --save-dev
用webpack打包脚本, 就在命令行执行
npm run build
生成的代码就在
dist/bundle.js
第五: 保存bundle.js到手机
如果只有这一个文件的话, 直接按 F1, 输入autojs, 选择保存当前文件, 打包的时候就打包单文件;
如果你还有其他依赖, 比如图片, 那么你就要新建一个项目,
把图片和bundle.js都复制一份过去, 然后按 F1, 输入autojs, 选择保存项目, 打包的时候就打包这个新建的项目.
为什么不打包写代码的那个项目呢?
因为我打包总是失败, 不是这里错, 就是那里错.
第六: 打包成app测试
如果打包之后, 直接闪退怎么办?
你可以给代码中, 添加更多的日志, 然后保存到文件, 报错了就去查日志;
我是不想写很多日志的, 因此我采用的方法是, 专门打包一个app用来测试, 点击按钮之后, 就运行bundle.js
ui.执行项目nodejs.click(function () { let filePath = ui.项目入口文件路径nodejs.text().trim(); let workingDirectory = getParentPath(filePath); console.log("workingDirectory ="); console.log(workingDirectory); const execution = $engines.execScriptFile(filePath, { arguments: { serverEngineId: $engines.myEngine().id, }, workingDirectory: workingDirectory }); nodejsExecutions.push(execution); });
如果你的 bundle.js 有别的依赖的话, 注意打印看看工作路径是否和你预期的一致:
在bundle.js开头添加这行代码, 查看 Node.js 进程的当前工作目录
consle.log(process.cwd());
这样就算bundle.js崩溃了, 我打包的那个app是不会崩溃的, 还可以正常查看日志.
第七: project.json
按 F5 运行的脚本是由 main 字段决定的, 因此我们会修改main字段
"main": "main.js", "main": "dist/bundle.js",
可以增加 type 字段, 那么代码默认用 nodejs 执行
"type": "node"
第八: 三个文件
- .autojs.build.ignore 打包的时候, 不打包它里面匹配的文件
- .autojs.source.ignore 它匹配的文件, 不参与加密过程
- .autojs.sync.ignore 同步的时候, 不给手机传它匹配的文件
第九: 试试autojs的nodejs写的app
用webpack压缩后的脚本大小是 423 KB,
打包app的时候, 我选择的 CPU 架构是 arm64-v8a, 也许有的旧手机不能使用, 旧手机 v7 居多.
app下载体验: ChatGPT安卓版
app功能
- AI 聊天
- AI 根据文件生成图片
- AI 修改图片内容
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 ---
以上就是autojs的nodejs打包成品app经验分享的详细内容,更多关于autojs nodejs打包成app的资料请关注脚本之家其它相关文章!