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

Question

我在基础6.4中使用javascript失去了理智.我不知道这个Webpack的事情是怎么回事.似乎有些库/插件工作,有些则没有.我的最新一期是plyr(https://plyr.io/).我不明白为什么TweenMax 100%正常工作,而ply​​r.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

我假设您从ZURB模板开始了您的Foundation项目.它使用Gulpfile(gulpfile.babel.js)与Webpack捆绑JavaScript模块.

在这个脚本里面有一个Webpack配置,如下所示:

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

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

所以具体的配置gulpfile.babel.js告诉Webpack使用babel-loader为/ src文件夹中的所有文件和js扩展名.但是正如Webpack中所解释的那样 -某些模块/库可能需要全局依赖(例如$ 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'
          }
        ]
      }
    ]
  }
}

项目文件(config.yml,app.js)不需要进行其他更改.

这样你应该plyr像以下一样访问全局变量app.js:

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