在这一章中，我们对除了引入 bootstrap 还会对其他地方进行升级。

目录如下

.
|___dist
|___node_modules
|___src
|______index.html
|______index.js
|___.babelrc
|___package.json
|___package-lock.json
|___webpack.config.js

参考资料

npm | 模块 bootstrap 认识和安装

在单独使用 tensorflow.js 的时候，参考

pose_score | tensorflow.js 应用

配置文件

package.json

内容如下

{
  "name": "tensorflow-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@tensorflow-models/posenet": "^2.2.1",
    "@tensorflow/tfjs": "^1.7.4",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/runtime": "^7.12.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.3",
    "popper.js": "^1.16.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

这里有一个最大的区别就是将上一次的

"type": "module",

去掉了，参考

pose_score | tensorflow.js 应用

webpack.config.js

这里面的内容如下

let path = require('path');
const webpack = require('webpack');
let MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './main.js',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './dist',
                    },
                }, {
                    loader: "css-loader",
                }
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
    ]
}

.babelrc

babel 参考

babel

babel 的配置文件如下

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

如果运行上面的脚本

npm run build

会在 dist 文件夹下生成

bundle.js
style.css

code

index.js

内容如下

import 'bootstrap';  //  引入 Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

import * as posenet from '@tensorflow-models/posenet';
import {drawKeypoints, renderImageToCanvas, drawSkeleton, getImagePose, getScore} from "../../util/util";

...
...

index.html

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<head>
</head>

<style>
    @import url(../dist/style.css);
</style>
<body>
<div>
    ...
</div>
</body>
<script src="../dist/bundle.js"></script>

</html>