Foundation6.4项目中的JavaScript不起作用，但外部JS确实起作用
我对基金会6.4中的javascript感到不知所措。我不知道Webpack的事是怎么回事。似乎有些库/插件可以工作，而有些则不起作用。我的最新一期是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: []
});
});我还在我的plyr.js文件中提供了通往config.yml的路径：
# 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"回答 3
Stack Overflow用户
发布于 2018-02-09 12:53:04
我想你是从ZURB模板开始你的基金会项目的。它使用Gulpfile (gulpfile.babel.js)与Webpack捆绑JavaScript模块。
在这个脚本中有一个Webpack配置，如下所示：
let webpackConfig = {
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
}Webpack配置可以在模块部分中为模块定义一些规则(配置加载器、解析器选项等)。特别是，装载机使webpack能够处理和捆绑文件(或执行其他Webpack任务)。
因此，gulpfile.babel.js中的特定配置告诉Webpack，对于扩展名为js的/src文件夹中的所有文件，都要使用巴贝尔装载机。但是，正如在Webpack -中解释的那样，一些模块/库可能期望全局依赖(例如，用于jQuery的$)或创建需要导出的全局。
要像普莱尔一样支持这些库，可以使用暴露装载机。因此，在gulpfile.babel.js中向Webpack配置添加一个模块规则，指向暴露装载机 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)进行其他更改。
这样，您应该将plyr作为全局变量访问，就像在app.js中一样。
var blast = plyr.setup('#blast', {
hideControls: true,
clickToPlay: false,
controls: []
}); Stack Overflow用户
发布于 2018-02-04 05:26:36
Stack Overflow用户
发布于 2018-02-09 10:36:18
如果没有实际的项目代码，就很难找出哪里出了问题。但这是我对情况的看法。
首先，为什么要从本地文件导入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: []
});如果所有这些仍然不起作用，我相信最好是你分享你的项目代码-至少比你今天做的更多。
https://stackoverflow.com/questions/48526790
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号