在 webpack 中使用系绳（Angular CLI）答案

【问题标题】：Using tether with webpack (Angular CLI)在 webpack 中使用系绳（Angular CLI）
【发布时间】：2017-06-23 09:38:23
【问题描述】：

我正在使用 Angular CLI 开发一个项目。所以我使用npm install tether --save 安装了tether，并在app.component.ts 中导入了依赖关系使用import * as Tether from 'tether'。

当我尝试使用 new Tether({ ... }) 初始化 Tether 时，它会在控制台中打印以下错误：

例外：WEBPACK_IMPORTED_MODULE_4_tether 不是构造函数

如果我使用 console.log(Tether) 打印 Tether 变量，它会给我一个看似空的对象。

你们能帮帮我吗？我以前从未使用过 typescript 和 webpack，所以如果我在这里遗漏了一些明显的东西，我很抱歉。

【问题讨论】：

标签： angular typescript webpack angular-cli tether

【解决方案1】：

由于您使用的是 Angular-cli，因此您必须将其添加到您的 angular-cli.json

在您的文件（angular-cli.json）中将其包含在脚本数组下：

 "scripts": [
            "other/scripts/you've used"
            "../node_modules/tether/dist/js/tether.min.js",
            "../node_modules/tether-shepherd/dist/js/shepherd.min.js"
        ],

在样式中包含 css。

希望一切顺利。

【讨论】：

【解决方案2】：

如果您使用的是 bootstrap4，那么 tether.js 已经是一个依赖项。这可能有效

使用 Angular-cli

首先，从 npm 安装 Bootstrap：

npm install bootstrap@next

Then add the needed script files to angular-cli.json --> scripts:



 "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/tether/dist/js/tether.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js"
           ],

Finally add the Bootstrap CSS to the angular-cli.json --> styles array:

    "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"`enter code here`
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

对于 Webpack

如果你使用的是 webpack：

按照文档中的说明设置引导加载程序；

通过 npm 安装 tether.js；

将 tether.js 添加到 webpack 的 ProvidePlugin 插件中：

 plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]

Bootstrap 4 不再使用标签 window.tether

Note that using Bootstrap 4.0.0-alpha.6,

Bootstrap 不再检查“window.Tether” 但是全局变量“Tether”，这样webpack的配置就变成了

plugins: [
    <... your plugins here>,
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "Tether": 'tether'
    })
]

【讨论】：

【解决方案3】：

使用import Tether from 'tether'; 这会导入默认导出的系绳，恰好是您尝试实例化的TetherClass。

代码import * as Tether 导入库的所有（默认和命名）导出，您需要new Tether.TetherClass()。

查看伟大的Exploring ES6 book on modules 了解详情。

【讨论】：

如果我尝试使用import Tether from 'tether' 或import * as Tether 使用new Tether.TetherClass() 会发生同样的错误：它告诉我这个对象不是构造函数。如果我 console.log TetherClass 我得到 null :(
我试图传达的方式是import Tether from 'tether'; new Tether();。如果这不起作用：您使用的是哪个版本的 Tether？
系绳版本 1.4.0
这是一个工作要点：gist.github.com/simon04/121f210379a0bff9669b34ad26196fcc
我安装了另一个名为physicsjs 的包，它运行良好。我将创建一个新项目并再次添加 Tether 以查看它是否与我当前的项目不兼容。我正在使用 bootstrap 4，它恰好有 tether 作为依赖项。这有什么影响吗？