项目中的 Foundation 6.4 JavaScript 无法正常工作，但外部 JS 可以

Question

我对 Foundation 6.4 中的 javascript 失去了理智。我不知道这个 Webpack 是怎么回事。似乎有些 libraries/plugins 有效，有些则无效。我的最新一期是 plyr (https://plyr.io/)。我不明白为什么 TweenMax 可以 100% 正常工作而 plyr.js 却不行。我究竟做错了什么？

这是我得到的错误..

app.js:23026 Uncaught ReferenceError: plyr is not defined

这就是我的 app.js 的样子..

import $ from 'jquery';
import whatInput from 'what-input';


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


require('./TweenMax.js');
require('./plyr.js');


//import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';

$(document).foundation().ready(function(){

    TweenMax.set(".logo-center", {transformOrigin:"50% 50%"});

    var blast = plyr.setup('#blast', {
        hideControls: true,
        clickToPlay: false,
        controls: []
    }); 
});

我的 config.yml 文件中也有 plyr.js 的路径：

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 10"
  - "ios >= 9"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
  # Paths to JavaScript entry points for webpack to bundle modules
  entries:
    - "src/assets/js/app.js"
    - "src/assets/js/plyr.js"
    - "src/assets/js/TweenMax.js"

Answer 1

关于我们在项目中如何使用 expose-loader，您可能需要使用类似 expose-loader so that plyr is available globally on window. Here's more info 的内容。

Answer 2

没有实际的项目代码，很难找出问题所在。但这是我对这种情况的看法。

首先，为什么要从本地文件导入 plyr？不应该是 require('plyr') 而不是 require('./plyr.js').

此外，为什么当模块将库导出为 Plyr 时使用 plyr 和小写 'p'，而在中使用大写 'P'全局绑定，即绑定到 window.

您的代码：

plyr.setup('#blast', {
    ...
});

plyr模块：

! function (e, t) {
    "object" == typeof exports && "undefined" != typeof module
        ? module.exports = t() // commonjs
        : "function" == typeof define && define.amd
            ? define("Plyr", t) // requirejs
            : e.Plyr = t() // window/global binding
}(this, function () {
    ...
});

完全转储here and here. Source here。

您可以通过在加载代码之前在 index.html 中加载 plyr.js 并使用全局绑定 Plyr 来使其工作。 =24=]

// index.html
<html>
<head>
    <script src="plyr.js"></script> // window.Plyr = ...
</head>
<body>
    ...
    <script src="bundle.js"></script>
</body>
</html>


//main.js
...
Plyr.setup('#blast', {
    hideControls: true,
    clickToPlay: false,
    controls: []
});

您还可以在代码中导入 plyr 模块作为 命名导入 :

import Plyr from 'plyr';

...

Plyr.setup('#blast', {
    hideControls: true,
    clickToPlay: false,
    controls: []
});

如果所有这些仍然不起作用，我认为最好共享您的项目代码 - 至少比您今天所做的更多。

Answer 3

我假设你是从 ZURB template 开始你的基金会项目的。它使用 Gulpfile (gulpfile.babel.js) 用于 JavaScript 模块与 Webpack 的捆绑。

在此脚本中有一个 Webpack configuration，如下所示：

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

Webpack 配置可以在模块部分定义模块的一些规则（配置加载器、解析器选项等）。特别是 loaders 使 webpack 能够处理文件并将它们打包（或执行其他 Webpack 任务）。

因此 gulpfile.babel.js 中的特定配置告诉 Webpack 对 /src 文件夹中扩展名为 js 的所有文件使用 babel-loader。然而，正如 Webpack - Shimming 中所解释的，一些 modules/libraries 可能需要全局依赖项（例如 jQuery 的 $）或创建需要导出的全局变量。

支持这些库，喜欢Plyr, you can use expose-loader。所以在webpack config里面添加一个module rule gulpfile.babel.js，指向 expose-loader for plyr.js:

let webpackConfig = {
  module: {
    rules: [
      {
        test: /plyr.js/,
        use: [
          {
            loader: 'expose-loader',
            options: 'plyr'
          }
        ]
      },
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

不需要对您的项目文件进行其他更改（config.yml、app.js）。

这样您应该像在 app.js:

中一样将 plyr 作为全局变量访问

var blast = plyr.setup('#blast', {
    hideControls: true,
    clickToPlay: false,
    controls: []
});

项目中的 Foundation 6.4 JavaScript 无法正常工作，但外部 JS 可以

Foundation 6.4 JavaScript within project not working, but external JS does

javascript

zurb-foundation

webpack

plyr.js