我在基础6.4中使用
javascript失去了理智.我不知道这个Webpack的事情是怎么回事.似乎有些库/插件工作,有些则没有.我的最新一期是plyr(
https://plyr.io/).我不明白为什么TweenMax 100％正常工作,而plyr.js没有.我究竟做错了什么？
这是我得到的错误..
app.js：23026 Uncaught ReferenceError：未定义plyr
这就是我的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"
解决方法
我假设你从
ZURB template开始你的Foundation项目.它使用Gulpfile(gulpfile.babel.js)与Webpack捆绑JavaScript模块.
在这个脚本里面有一个如下所示的Webpack configuration：
let webpackConfig = {
module: {
rules: [
{
test: /.js$/,use: [
{
loader: 'babel-loader'
}
]
}
]
}
}
Webpack配置可以在模块部分中定义模块的一些规则(配置加载器,解析器选项等).
特别是加载器使webpack能够处理文件并将它们捆绑(或执行其他Webpack任务).
因此gulpfile.babel.js中的特定配置告诉Webpack将babel-loader用于带有js扩展名的/ src文件夹中的所有文件.
但是,正如Webpack – Shimming中所解释的,一些模块/库可能期望全局依赖(例如$for jQuery)或创建需要导出的全局变量.
要支持这些库,例如Plyr,您可以使用expose-loader.
因此,在Webpack配置中添加一个模块规则
gulpfile.babel.js,指向expose-loader 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)不需要进行其他更改.
这样你应该像app.js一样访问plyr作为全局变量：
var blast = plyr.setup('#blast',{
hideControls: true,controls: []
});
