jquery - 多次导入引导 js 不起作用打字稿

问题描述

我正在使用带有 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 的导入并仅导入“bootstrap/js/dist/popover”，它就可以工作。请注意，无论 TS 编译器，JS 控制台都不会抛出任何警告。

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

标签： jquerytypescriptsymfonywebpack

jquery - 多次导入引导 js 不起作用打字稿

问题描述

解决方案

推荐阅读