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

Question

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

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

我有文件，例如: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);
    });
});

如您所见，在此代码段中我使用了 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

This is a good approach?

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

Can I do this better? Especially handlers for click/scroll etc.

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

How can I efficiently include CSS?

我认为这里没有太多必要的改变。除了您将使用 webpack 的 css-loader 的可能性之外为了让你的 css 到达所需的公共(public)路径，最后你将得到一些通过 <link> 加载的 CSS 文件。标签。

Some good practices for "new guy in the town"?

继续前进:)

---

根据评论编辑

Can you provide more details about: I'd suggest to just try it: transpile / bundle your code and run it?

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

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