WebPack，node.js和MySQL在执行时导致mysql错误

如何解决WebPack，node.js和MySQL在执行时导致mysql错误

我想在前端和后端都使用node.js。我紧随Webpack Javascript Bundling for Both Front-end and Back-end (nodejs)之后是Soon Hin Khor博士。而且我取得了很大进步。但是，我找不到包含node.js MysqL的方法。我已经安装了npm MysqL。这是我的index.html

<!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://MysqLjs.com/MysqL.js"></script>

</head>
<body>
    <p>This text is from index.html</p>
    <script src="../dist/bundle-front.js"></script>
    <script src="../dist/bundle-back.js"></script>
    </body>
</html>

bundle-front.js运行正常，当我运行index.html时，在浏览器（Chrome）上看到“此文本来自index.html”。

这是我的package.json

{
  "name": "web-pack-test","version": "0.0.0","description": "WebPackTest","private": true,"author": "","scripts": {
    "start": "node server.js","test": "echo \"Error: no test specified\" && exit 1","build": "webpack"
  },"keywords": [],"license": "ISC","devDependencies": {
    "webpack": "^4.44.2","webpack-cli": "^3.3.12"
  },"dependencies": {
    "babel-loader": "^8.1.0","connect": "^3.7.0","lodash": "^4.17.20","MysqL": "^2.18.1","query": "^0.2.0","request": "^2.79.0","webpack-node-externals": "^2.5.2"
  }
}

这是我的webpack-back-config.js

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const nodeExternals = require('webpack-node-externals');

//Determining if crypto support is unavailable
let crypto;
try {
    crypto = require('crypto');    //This would give error
} catch (err) {
    console.log('crypto support is disabled!');
}

module.exports = {
    mode: 'development',target: "node",entry: {
        app: ["./src/back.js"]
    },output: {
        filename: 'bundle-back.js',path: path.resolve(__dirname,'dist'),},node: {
        fs: "empty",}
};

这是我的back.js，在运行WebPack时会生成bundle-back.js。

 var connection = MysqL.createConnection({
    host: 'localhost',user: 'root',password: '*******',database: 'perfmngdb',});

connection.connect(function (err) {
    if (err) throw err;
        console.log('Connected!');
});

connection.query('SELECT Description,Abbreviation FROM tblGrade',function (err,result) {
    if (err) {
        return console.error('error: ' + err.message);
    }
    console.log('Connected to the MysqL server.');

    console.log(result);
});

当back.js类似于上面的代码，并且在运行WebPack之后，我运行index.html时出现错误：

> back.js:2 Uncaught ReferenceError: MysqL is not defined
    at eval (back.js:2)
    at Object../src/back.js (bundle-back.js:96)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object.0 (bundle-back.js:107)
    at __webpack_require__ (bundle-back.js:20)
    at bundle-back.js:84
    at bundle-back.js:87

在Chrome开发者控制台上

如果我添加

const MysqL = require(MysqL);

在back.js的顶部，运行WebPack和index.html我得到了错误

Uncaught ReferenceError: require is not defined
    at eval (external_"MysqL":1)
    at Object.MysqL (bundle-back.js:118)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object../src/back.js (bundle-back.js:96)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object.0 (bundle-back.js:107)
    at __webpack_require__ (bundle-back.js:20)
    at bundle-back.js:84

总结一下：我要么得到“未定义MysqL”，要么得到“未定义需求”

感谢您的帮助。