Question

我对Webpack很新，我正在使用它捆绑用于我正在创建的静态网站的资产。这个网站使用来自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,
        });
    });

但是，由于parallax-js中未导入index.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

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

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

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

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

您可能会发现本教程（或其他）有用：https://www.youtube.com/watch?v=lziuNMk_8eQ

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

1 个答案: