javascript - 如何使用 Webpack 正确包含 JS 库？

Question

我是 Webpack 的新手，我正在使用它来捆绑用于我正在创建的静态网站的 Assets 。该网站使用来自 npm 包的多个 JS 文件，例如fullpage.js 和 parallax.js。我需要知道如何使用 Webpack 包含这些 JS 文件。

我尝试过的

我尝试的第一个选项是通过 app.js 导入 JS 文件

app.js

import './style.css';
import '../node_modules/fullpage.js/dist/jquery.fullpage.css';


window.$ = require('jquery');
window.$ = require('fullpage.js');
window.$ = require('parallax-js');


require('./index.js');

index.js

var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene,{
        frictionX: 0.1,
        frictionY: 0.1
    });


$(document).ready(function() {
        $('#fullpage').fullpage({
            recordHistory: false,
            scrollBar: true,
        });
    });

但是，由于 index.js 中没有导入 parallax-js，所以这不起作用。 Chrome 调试器说 Parallax is not defined -- index.js

我可以通过将 require 部分移动到 index.js 来解决这个问题，但这看起来并不干净。

---

我的第二个选择是通过 webpack.config.js 导入它们，在我看来这是正确的方法。

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    libs: [
        './node_modules/parallax-js/dist/parallax.js',
        './node_modules/fullpage.js/dist/jquery.fullpage.js'
    ]
  }
}

我包含了上面创建的 JS 文件(libs.js 和 main.js)。但是我仍然得到 Parallax is not defined -- index.js

以上两种方法哪个正确？有没有更好的方法来实现这一目标？我已经阅读了很多文档和文章，但我找不到这个非常基本的问题的正确答案，这就是为什么我在这里发布这个问题，想知道我是否遗漏了一些重要的东西。

谢谢。

Answer 1

是的，您在概念上遗漏了一些东西。您仍在尝试使用全局上下文(& window 对象)。 Webpack 不希望你那样工作。 Webpack 将所有内容包装起来并将所有内容放入模块中。

您需要在每个使用它们的文件中定义您的依赖项。然后，让 webpack 找出如何将所有内容捆绑在一起。为每个文件定义依赖关系实际上并不麻烦；这是正确的做事方式，也是所有其他编程语言的做事方式。

我还建议从 require 语法切换到 import 语法，因为它可以帮助您将其视为声明，而不是函数调用。

浏览 ES6 教程/项目以学习新的语法和方法可能会有所帮助。这是一个相当重大的转变，对于没有借鉴其他语言经验的现有 JS 开发人员来说尤其困难。

您可能会发现本教程(或其他教程)有帮助:https://www.youtube.com/watch?v=lziuNMk_8eQ