安卓使用npm+webpack+babel实现模块化支持部分ES6语法
本帖最后由 lalEasy 于 2023-12-27 20:41 编辑刚刚使用 easyclick 安卓因为目前只支持ES5语法不能使用类（可以用其他方式实现但是比较麻烦原型链什么的）开发起来比较麻烦代码也不好阅读。
该教程主要让 easyclick 支持部分ES6语法如: 类、默认值、解构、Set等等，支持使用部分npm库，本来想着使用 “core-js” 把ES6语法补全，但是出现了一些问题，目前也没有时间研究。ps: (主要是自己使用足够了，手里面的单子时间紧任务重) 后续有时间在尝试一下
大概原理就是使用 babel 把es6语法转换到es5 在用webpack解决导包的问题。
因为才接触 easyclick 没有多久前几天才正式入手，索性自己先手动封装一下，这边就分享现成的给大家，这边只是初步封装后续有更新也会更新帖子。理论上应该也支持常见的npm生态库(nodejs方面的除外)。
因为目前项目只针对逻辑方面，所以只实现了 逻辑代码方面的，资源（自动移动到 res 目录下）、扩展（自动移动到 plugin 目录下）、UI界面（vue什么的）还没有实现，动手能力强的可以手动试一下。
如有啥错误的地方，欢迎大佬指正。
首先要有 nodejs 环境
[*]新建一个新项目之后，创建 "package.json" 文件
[*]复制我的 package.json 配置粘贴就行然后执行 "npm i" 就行{
"name": "easyclick",
"version": "1.0.0",
"description": "",
"module": "es2015",
"main": "index.js",
"scripts": {
"dev": "webpack watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.23.4",
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"babel-loader": "^9.1.3",
"babel-preset-env": "^1.7.0"
}
}
[*]在项目目录下创建 ".babelrc" 文件
文件内容
{
"presets": [
"@babel/preset-env"
],
"plugins": []
}4.在项目目录下创建 "webpack.config.js" 文件
文件内容
const path = require('path');
module.exports = {
entry: './code/main.js',
output: {
filename: '.js',
path: path.resolve(__dirname, 'src/js'),
assetModuleFilename: ''
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
minimize: false
}
};minimize 选项是不压缩代码调试期间不建议打开因为那就不是给人看的。
[*]在下面根目录下 创建目录 "code"在下面创建main.js 就行了。
在写代码期间执行 "npm run dev" 就会监听代码改动自动编译到src/js/main.jsnpm run dev
如果不能运行尝试手动执行 "npm i -g webpack-cli webpack" 可以运行就没必要了
效果预览:
1图：代码目录结构 、2图：类测试和导入easyclick插件 、3图：尝试封装找图功能（稳定正常） 、4图: 部分ES6特性测试
牛了个大宝贝 有办法解决单文件太大的问题吗 这个不应该是官方来解决的吗? wangxiaoda 发表于 2024-1-10 13:37
有办法解决单文件太大的问题吗
已搞定:lol:lol:lol:lol UI 界面 用 vue2 可以的 wangxiaoda 发表于 2024-1-10 23:23
UI 界面 用 vue2 可以的
vue3呢 vue2是直接使用吗
页:
[1]