Geek Answers Handbook

Foundation 6.4 JavaScript in the project does not work, but external JS does

I'm losing my mind with javascript in Foundation 6.4. I have no idea what is happening with this Webpack product. Some libraries / plugins seem to work and some don't. My last problem is related to plyr ( https://plyr.io/ ). I do not understand why TweenMax works 100% perfectly, but plyr.js does not. What am I doing wrong?

This is the error I am getting.

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

Here's what mine looks like 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: []
    }); 
});

I also have a path to plyr.js in the config.yml file:

# Your project 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"
+6
source share
3 answers

, Foundation ZURB. Gulpfile (gulpfile.babel.js) JavaScript Webpack.

script Webpack, :

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

Webpack ( , ..). , webpack ( Webpack).

, gulpfile.babel.js Webpack babel-loader /src js. , Webpack - Shimming, / (, $ jQuery) , .

, Plyr, expose-loader. Webpack gulpfile.babel.js, expose-loader 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: []
});
+5

, - expose-loader, plyr window. , - .

+1

, . .

-, plyr ? require('plyr') require('./plyr.js').

, plyr "p", plyr, "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 () {
    ...
});

. .

, 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:

import Plyr from 'plyr';

...

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

- , , - , - , alreday.

+1

More articles:


All Articles