Question

我正在使用通过Symfony Webpack encore插件使用Symfony 4.1和Typescript 3.0.3的Web应用程序。

问题是当我在 ./ 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编译器发出任何警告。

我的 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();

我的 tsconfig.json ：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./assets/js/**/*"
  ]
}

我的 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>

我的 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

Answer 1

您正在制作和加载两个单独的Webpack捆绑包，每个捆绑包都包含一个Bootstrap副本，并且每个副本都将click事件处理程序与具有data-toggle="dropdown"属性的元素相关联。 bootstrap-select正在其创建的菜单上设置此属性。因此，当您单击菜单时，两个事件处理程序都会运行并尝试处理事件。显然这是无法预期的。

解决此问题的一种方法是将所有代码放入单个Webpack捆绑包中。我想还有其他可能的方法，但是我不熟悉该领域的最佳实践。

Answer 2

好吧，基于Matt McCutchen的回答，我已经能够修复该错误，我需要的是与项目主要依赖项共享的条目。这可以通过Symfony Webpack Encore的 .createSharedEntry（名称：字符串，文件：Array [string]）方法实现。

您需要jquery，jquery-ui，bootstrap和bootstrap-select javascript依赖项的图像，此行与所有打包的依赖项进行共享条目：

.createSharedEntry('js/common', ['jquery', 'bootstrap', 'bootstrap-select', 'jquery-ui'])

在https://github.com/soasada/example-project中有解决方案的示例。

多次导入Bootstrap js不起作用打字稿

2 个答案: