Question

我在基金会6.4中使用javascript失去了理智。我不知道这个Webpack的事情是怎么回事。似乎有些库/插件工作，有些则没有。我的最新一期是plyr（here）。我不明白为什么TweenMax 100％正常工作，而plyr.js没有。我究竟做错了什么？

这是我得到的错误..

setAffineTransform:(CGAffineTransform)

这就是我app.js:23026 Uncaught ReferenceError: plyr is not defined的样子..

app.js

我的config.yml文件中还有plyr.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: []
    }); 
});

Answer 1

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

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

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

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

因此gulpfile.babel.js中的特定配置告诉Webpack将babel-loader用于 js 扩展名的/ src文件夹中的所有文件。但是如Webpack - Shimming中所述，某些模块/库可能需要全局依赖（例如$ for jQuery）或创建需要导出的全局变量。

要支持这些库，例如Plyr，您可以使用expose-loader。因此，在Webpack配置中添加一个模块规则 gulpfile.babel.js，plyr.js指向let webpackConfig = { module: { rules: [ { test: /plyr.js/, use: [ { loader: 'expose-loader', options: 'plyr' } ] }, { test: /.js$/, use: [ { loader: 'babel-loader' } ] } ] } }：

plyr

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

这样您就可以像app.js中那样访问var blast = plyr.setup('#blast', { hideControls: true, clickToPlay: false, controls: [] });全局变量：

    Language lang = new Language();
    lang.setLangCode("06");
    lang.setLanguage("german");

    Data dc = new Data();
    dc.setDescription("description_german");
    dc.setName("name_german");
    dc.setLanguage(lang);

    //2.
    Language lang2 = new Language();
    lang2.setLangCode("06");
    lang2.setLanguage("german");

    Document doc  = new Document();
    doc.setDescription("description_de");
    doc.setName("name_de");


    doc.setLanguage(lang2); // When I do like: doc.setLanguage(lang) it persists the data
    doc.setDataCollection(dc);
    em.merge(doc);

Answer 2

您可能需要使用expose-loader之类的内容，以便在plyr全局使用window。 Here's more info关于我们如何在项目中使用expose-loader。

Answer 3

如果没有实际的项目代码，很难弄清楚出了什么问题。但这是我对这种情况的看法。

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

另外，为什么你使用plyr小写＆＃39; p＆＃39;当模块将库导出为Plyr时，使用大写＆＃39; P＆＃39;在全局绑定中，即绑定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和here。来源here。

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

// 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: []
});

如果所有这些仍然不起作用，我相信如果你分享你的项目代码最好 - 至少比你做的更多。

基础6.4项目中的JavaScript不工作，但外部JS确实如此

3 个答案: