安卓使用npm+webpack+babel实现模块化支持部分ES6语法

lalEasy

刚刚使用 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: '[name].js',
          path: path.resolve(__dirname, 'src/js'),
          assetModuleFilename: '[path][name][ext]'
      },
      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.js

  npm run dev

如果不能运行尝试手动执行 "npm i -g webpack-cli webpack" 可以运行就没必要了


效果预览:
1图：代码目录结构 、2图：类测试和导入easyclick插件 、3图：尝试封装找图功能（稳定正常） 、4图: 部分ES6特性测试


   

EC小编

牛了个大宝贝

wangxiaoda

有办法解决单文件太大的问题吗

mogoyu

这个不应该是官方来解决的吗?

wangxiaoda

wangxiaoda 发表于 2024-1-10 13:37
有办法解决单文件太大的问题吗

已搞定

wangxiaoda

UI 界面 用 vue2 可以的

3362147008

wangxiaoda 发表于 2024-1-10 23:23
UI 界面 用 vue2 可以的

vue3呢 vue2是直接使用吗