Я работаю в веб-приложении, которое использует Symfony 4.1 и Typescript 3.0.3 с плагином Symfony Webpack на бис.
Проблема заключается в том, что при импорте загрузчика в моем . / Assets / js/app.ts:
import 'bootstrap';
jQuery(function () {
$('#clock-timetable').popover();
$('#form_popover').popover();
});
И снова импортировать в другой файл . / assets / js / home / example.ts :
import 'bootstrap';
import 'bootstrap-select';
export class Example {
readonly element: JQuery;
constructor(element: JQuery) {
this.element = element;
}
render(data: Array<SelectorData>): void {
for (let obj of data) {
this.element.append("<option data-icon='fa fa-map-marker' value='" + obj.code + "'>" + obj.name + "</option>");
}
this.element.selectpicker('refresh');
}
}
Селектор не работает.Но если я изменю в своем скрипте app.ts импорт начальной загрузки и импортирует только 'bootstrap / js / dist / popover' , это сработает.Обратите внимание, что консоль JS также не выдает никаких предупреждений компилятору TS.
My webpack.config.js :
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.addEntry('js/app', './assets/js/app.ts')
.addEntry('js/home/example', './assets/js/home/example.ts')
.enableTypeScriptLoader()
;
module.exports = Encore.getWebpackConfig();
My tsconfig.json :
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
],
"include": [
"./assets/js/**/*"
]
}
My package.json :
{
"devDependencies": {
"@symfony/webpack-encore": "^0.20.0",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"@types/bootstrap": "^4.1.2",
"@types/bootstrap-select": "^1.11.1",
"@types/jquery": "^3.3.6",
"@types/jqueryui": "^1.12.4",
"bootstrap": "^4.1.3",
"bootstrap-select": "^1.13.2",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"popper.js": "^1.14.4",
"ts-loader": "^3.5.0",
"typeface-montserrat": "^0.0.54",
"typescript": "^3.0.3"
}
}
base.html.twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}"/>
<title>{% block title %} {{ 'company.name' | trans }} {% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('build/css/app.css') }}">
{% endblock %}
</head>
<body>
{{ render(controller('App\\Controller\\CommonController::navBar')) }}
{% block body %}{% endblock %}
{{ render(controller('App\\Controller\\CommonController::footer')) }}
{% block javascripts %}
<script type="text/javascript" language="javascript" src="{{ asset('build/js/app.js') }}"></script>
{% endblock %}
</body>
</html>
My index.html.twig :
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
{{ render(controller('App\\Controller\\HomeController::example')) }}
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript" language="javascript" src="{{ asset('build/js/home/example.js') }}"></script>
{% endblock %}
ВОПРОС: Почему я не могу дважды импортировать начальную загрузку в разные файлы?
РЕДАКТИРОВАТЬ : Вот пример проблемы: https://github.com/soasada/example-project