使用 webpack 加载 jQuery 模块的最佳方法是什么

Question

我有一些用 PHP 编写的项目，现在我想使用 webpack、npm 等来管理前端资源。

到目前为止，我将 JS/CSS 文件的源代码复制粘贴到公共目录中，然后将它们简单地包含在页面中。

我有文件，例如：client.js，其中包含：

$(function () {
    $(document).scroll(function () {
        if ($(window).scrollTop() > ($(window).height() / 3)) {
            $(".return-to-top").fadeIn(200);
        } else {
            $(".return-to-top").fadeOut(200);
        }
    });

    $('.return-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });

    $('pre code').each(function (i, block) {
        if (!$(block).attr("class")) {
            $(block).addClass('text');
        }
        hljs.highlightBlock(block);
    });
});

如你所见，在这个 sn-p 中我使用了 jQuery、hljs 插件（我有更多的那种文件，里面有不同的插件）。

尝试配置npm package.json:

{
  "dependencies": {
    "highlight.js": "^9.12.0",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "scripts": {
    "build": "webpack"
  },
  "private": true
}

还有webpack.conf.js：

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

module.exports = {
    entry: {
        app: './resources/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public/dist')
    },
    plugins: [
        new CleanWebpackPlugin(['public/dist']),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

./resources/app.js

import $ from "jquery";
import returnToTop from "./return-to-top";
import highlight from "./highlight";

window.jQuery = $;
window.$ = $;

$(function () {
    returnToTop($);
    highlight($);
});

在return-to-top.js 和highlight.js 文件中，我有来自client.js 的代码片段。

highlight.js:

import hljs from "highlight.js";

export default function highlight() {
    $('pre code').each(function (i, block) {
        if (!$(block).attr("class")) {
            $(block).addClass('text');
        }
        hljs.highlightBlock(block);
    });
};

return-to-top.js:

export default function returnToTop() {
    $(document).scroll(function () {
        if ($(window).scrollTop() > ($(window).height() / 3)) {
            $(".return-to-top").fadeIn(200);
        } else {
            $(".return-to-top").fadeOut(200);
        }
    });

    $('.return-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
};

一些问题：

1. 这是一个好方法吗？
2. 我可以做得更好吗？尤其是点击/滚动等处理程序。
3. 如何有效地包含 CSS？
4. “城里新人”的一些好的做法？

我想准备我的代码以使用 Vuejs。

Answer 1

这是个好方法吗？

这看起来是一个很好的起点。我建议尝试一下：转换/捆绑您的代码并运行它。如果您遇到错误，请从那里开始，一次一个错误。

我可以做得更好吗？特别是点击/滚动等处理程序。

可能。但是诸如单击/滚动处理程序之类的运行时事物与如何转换到 ES 模块的问题无关，而这正是您实际正在做的事情。

如何有效地包含 CSS？

我认为这里没有太大的改变。除了您可能会使用 webpack 的 css-loader 将您的 css 获取到所需的公共路径之外，最后您只会得到一些通过 <link> 标签加载的 CSS 文件。

“镇上新人”的一些好的做法？

摇滚 :)

---

从 cmets 编辑

您能否提供更多详细信息：我建议您尝试一下：编译/捆绑您的代码并运行它？

这听起来比实际更难；转译/捆绑是 webpack 负责的过程。

• 从终端运行webpack 命令以使用您的 webpack 配置文件开始构建。
• 将生成的资产加载到页面中，看看它是否有效。