使用JS前端体系实现安卓脚本应用（四）添加webpack

在上一节中我们通过webview来解决了界面和交互问题，但是目前还无法使用npm包来扩展AJ功能，这时候引入webpack就非常有必要了。webpack同时还具备代码压缩混淆等功能，可以进一步确保我们应用的精巧和安全。由于细节比较多，因此列出详细步骤。

步骤一

请确保电脑上安装了node.js，如果没装的话点击连接下载安装即可，建议使用左边的版本，目前是10.15.3 LTS。

步骤二

ctrl + `或点击vscode的【终端】- [新建终端】，可打开vscode终端，执行命令npm init，一直回车即可得到一个初始化文件package.json。
依次执行以下命令来安装webpack相关的包

npm i webpack webpack-cli -D
npm i clean-webpack-plugin -D
npm i babel-loader @babel/core @babel/preset-env -D

步骤三

在根目录下创建.babelrc文件，它可以将高版本的js代码降级以实现兼容。内容如下

{
  "presets": ["@babel/preset-env"]
}

步骤四

创建webpack.config.js文件，这个是webpack的配置文件，由于不需要复杂的功能，因此配置很简单，复制以下内容即可。这里只做了js的配置，如果需要使用ts的话自行修改即可。

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: ['./src/index.js'],
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    },
    target: 'node',
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}

步骤五

我们指定了src/index.js为入口文件，现在它还不存在呢，赶紧创建吧~
在根目录创建src文件夹，然后在里面创建一个index.js文件，内容暂时留空。

步骤六

修改package.json文件，在scripts属性下添加"start": "npx webpack --watch",，结果如下图

添加scripts属性

关于webpack的配置就此结束，在vscode终端下执行npm start即可看到项目中多了一个dist文件夹，里面的build.js即为最终打包好的js文件，可以在main.js里引入它，app实际跑的是这个dist/build.js文件，而不再是src里的源码。
执行了npm start会监听src文件夹的内容并动态编译成新的dist/build.js文件，所以不要关闭该终端。

引入

我们对main.js的内容做点修改，只留下到ui.layout()的内容，其余的都搬到src/index.js里，然后通过aj自带的简单模块加载器引入dist/build.js文件，现在main.js是这样的

"ui";

importClass(android.webkit.WebView)
importClass(android.webkit.WebChromeClient)
importClass(android.webkit.WebResourceResponse)
importClass(android.webkit.WebViewClient)

ui.layout(
    <linear w="*" h="*">
        <webview id="webview" h="*" w="*" />
    </linear>
)

require('dist/build')

src/index.js文件看起来是这样的

let webview = ui.webview
let set = webview.getSettings()
set.setAllowFileAccessFromFileURLs(false)
set.setAllowUniversalAccessFromFileURLs(false)
set.setSupportZoom(false)
set.setJavaScriptEnabled(true)
webview.loadUrl('file:///storage/emulated/0/脚本/lesson/index.html')

var webcc = new JavaAdapter(WebChromeClient, {
    onJsPrompt: function (webView, url, fnName, defaultValue, jsPromptResult) {
        toast(fnName + ' ' + defaultValue)
        jsPromptResult.confirm()
        return true
    }
})
webview.setWebChromeClient(webcc)

整个项目结构现在应该是这样的

项目结构

我们添加了太多东西，src文件夹内是我们的源码，node_modules是npm包，这些都不适合保存到项目中，因此我们配置一下project.json，忽略掉这些文件。修改之后的project.json内容如下

{
    "name": "新建项目",
    "main": "main.js",
     "ignore": [
        "build",
        "node_modules",
        "src",
        "test",
        ".babelrc",
        "jsconfig.json",
        "package-lock.json",
        "package.json",
        "webpack.config.js"
    ],
    "packageName": "com.example",
    "versionName": "1.0.0",
    "versionCode": 1
}

最后

现在执行AJ命令，选择【保存项目到设备】，然后在模拟器运行项目看看吧！咦？好像没啥区别啊……不要慌，在下一节我们会解放npm的强大能力，这一切的折腾会有价值的。