0
我想在我的Symfony 3.3項目中使用SensioLab Webpack Encore，但是在向webpack添加一些腳本之後，我的腳本沒有看到其他腳本的功能。Webpack Encore - 查看jQuery插件
的package.json
{
"name": "HIDDEN",
"version": "1.0.0",
"license": "UNLICENSED",
"description": "HIDDEN",
"repository": {
"url": "HIDDEN",
"type": "git"
},
"author": "Alexey Samara <HIDDEN>",
"dependencies": {
"jquery": "3.1.1",
"expose-loader": "0.7.3",
"bootstrap": "3.3.7",
"datatables.net": "1.10.15",
"datatables.net-buttons": "1.4.0",
"datatables.net-buttons-bs": "1.4.0",
"html5shiv": "^3.7.3",
"respond.js": "^1.4.2",
"metismenu": "2.7.0",
"slimscroll": "0.9.1",
"pace-js": "1.0.2",
"gritter": "1.7.4",
"toastr": "2.1.2",
"jquery.flot": "0.8.3",
"jquery.flot.tooltip": "0.9.0",
"ecore-template-skeleton-static": "git+ssh://HIDDEN"
},
"devDependencies": {
"@symfony/webpack-encore": "^0.11.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6"
}
}
webpack.config.json
var Encore = require('@symfony/webpack-encore'),
eCoreTemplatePath = './node_modules/ecore-template-skeleton-static/';
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.enableSassLoader()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning()
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
})
.addLoader({
test: require.resolve('jquery'),
use: [
{loader: 'expose-loader', options: 'jQuery'},
{loader: 'expose-loader', options: '$'}
]
})
.cleanupOutputBeforeBuild()
.addEntry('jquery', './node_modules/jquery/dist/jquery.min.js')
.addEntry('bootstrap', [
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
eCoreTemplatePath + 'css/bootstrap.min.css',
eCoreTemplatePath + 'font-awesome/css/font-awesome.min.css'
])
.addStyleEntry('animate', eCoreTemplatePath + 'css/animate.css')
.addEntry('metismenu', [
'./node_modules/metismenu/dist/jquery.metisMenu.js',
'./node_modules/metismenu/dist/metisMenu.min.css'
])
.addEntry('slimscroll', eCoreTemplatePath + 'js/plugins/slimscroll/jquery.slimscroll.min.js')
.addEntry('pace', eCoreTemplatePath + 'js/plugins/pace/pace.min.js')
.addEntry('gritter', [
eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.min.js',
eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.css'
])
.addEntry('toastr', [
eCoreTemplatePath + 'js/plugins/toastr/toastr.min.js',
eCoreTemplatePath + 'css/plugins/toastr/toastr.min.css'
])
.addEntry('flot', [
eCoreTemplatePath + 'js/plugins/flot/jquery.flot.js',
eCoreTemplatePath + 'js/plugins/flot/jquery.flot.tooltip.min.js',
eCoreTemplatePath + 'js/plugins/flot/jquery.flot.spline.js',
eCoreTemplatePath + 'js/plugins/flot/jquery.flot.resize.js',
eCoreTemplatePath + 'js/plugins/flot/jquery.flot.pie.js'
])
.addEntry('iCheck', [
eCoreTemplatePath + 'js/plugins/iCheck/icheck.min.js',
eCoreTemplatePath + 'css/plugins/iCheck/custom.css'
])
.addEntry('datatables',[
eCoreTemplatePath + 'js/plugins/dataTables/datatables.min.js',
'./node_modules/datatables.net-buttons/js/dataTables.buttons.js',
'./node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js',
eCoreTemplatePath + 'css/plugins/dataTables/datatables.min.css',
'./node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
])
.addEntry('fixIE', [
'./node_modules/html5shiv/dist/html5shiv.min.js',
'./node_modules/respond.js/dest/respond.min.js'
])
.addEntry('ecore-template-skeleton-static',[
eCoreTemplatePath + 'js/inspinia.js',
eCoreTemplatePath + 'css/style.css'
])
;
module.exports = Encore.getWebpackConfig();
layout.html.twig
{% block javascripts %}
<script src="{{ asset('build/jquery.js') }}"></script>
<script src="{{ asset('build/bootstrap.js') }}"></script>
<script src="{{ asset('build/metismenu.js') }}"></script>
<script src="{{ asset('build/slimscroll.js') }}"></script>
<script src="{{ asset('build/pace.js') }}"></script>
<script src="{{ asset('build/toastr.js') }}"></script>
<script src="{{ asset('build/iCheck.js') }}"></script>
<script src="{{ asset('build/ecore-template-skeleton-static.js') }}"></script>
{% endblock %}
作爲結果，我有：
Uncaught TypeError: $(...).metisMenu is not a function at HTMLDocument. (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97) at mightThrow (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:3962) at process (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:4030)
Ecore的模板的骨架static.467b4f0501b93aee4b47.js：97
$('#side-menu').metisMenu();