webpack - Foundation 6.4 JavaScript inom projektet fungerar inte, men extern JS gör det

Jag tappar förståndet med JavaScript i Foundation 6.4. Jag har ingen aning om vad som pågår med detta Webpack-grejs. Det verkar som att vissa bibliotek/plugins fungerar och vissa gör det inte. Mitt senaste problem är med plyr (https://plyr.io/). Jag förstår inte varför TweenMax fungerar 100 % bra och plyr.js inte gör det. Vad gör jag fel?

Det här är felet jag får..

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

Så här ser min app.js ut..

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

Jag har också sökvägen till plyr.js i min config.yml-fil:

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"

Svar #1

Jag antar att du startade ditt Foundation-projekt från ZURB-mallen. Det använder en Gulpfile (gulpfile.babel.js) för att samla JavaScript-moduler med Webpack.

Inuti detta skript finns en Webpack-konfiguration som nedan:

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

Webpack-konfigurationen kan definiera, i modulsektionen, vissa regler för moduler (konfigurera loaders, parseralternativ, etc.). Särskilt loaders gör det möjligt för webpack att bearbeta filer och paketera dem (eller utföra andra Webpack-uppgifter).

Så den specifika konfigurationen i gulpfile.babel.js berättar för Webpack att använda babel-loader för alla filer i /src-mappen med js-ändelse. Som förklarats i Webpack - Shimming kan vissa moduler/bibliotek förvänta sig globala beroenden (t.ex. $ för jQuery) eller skapa globala variabler som behöver exporteras.

För att stödja dessa bibliotek, som Plyr, kan du använda expose-loader. Så lägg till en modulregel i Webpack-konfigurationen inuti gulpfile.babel.js, som pekar på expose-loader för plyr.js:

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

Inga andra ändringar behövs i dina projektfiler (config.yml, app.js).

På det här sättet bör du komma åt plyr som en global variabel precis som i din app.js:

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

Svar #2

Du kan behöva använda något som expose-loader så att plyr är tillgängligt globalt på window. Här är mer information om hur vi använde expose-loader i vårt projekt.