Javascript 如何在Angular 4项目中导入引导daterangepicker？

我尝试按照教程中的说明将引导daterangepicker集成到Angular 4项目中，但我得到以下错误和警告。错误行是：

uncaughtypeerror:\uuu webpack\u require\uuu.i（…）不是函数

。有人知道怎么解决这个问题吗

---

问题在于本教程使用了无效的ESM->CommonJS互操作。使用

import$fromjquery取而代之。在ECMAScript中调用命名空间导入（
*as
）无效

TLDR:写入

import $ from 'jquery';
import 'bootstrap-daterangepicker';

并设置
--allowSyntheticDefaultImports
（
“allowSyntheticDefaultImports”：在
“compilerOptions”
中设置true
），以便TypeScript使用合成的默认导入正确检查代码

我也在文章中添加了一些内容

详细信息：

基本上，ECMASCript规范禁止作为函数调用。当您使用语法时

import * as imported from 'some-module';

将创建名为
imported
的模块命名空间对象。此对象公开指定模块的每次导出以进行限定访问，例如导入的
。a
，其中
a
由
'some-module'
导出。但是，在仅导出单个值的AMD或CommonJS模块中，通常将该值作为模块本身导出。这通常写为

// AMD
define(function () {
  const $ = {...}; // jquery implementation

  return $;
});

// AMD
define(function () {
  const $ = {...}; // jquery implementation

  return {$};
});

或

define
返回的值或分配给
模块的值。exports
表示模块本身

要导入这样的导出，通常需要编写

// AMD
define(["jquery"], function ($) {
  $('div').text('set via jQuery');
});

// AMD
define(["jquery"], function ($) {
  $.$('div').text('set via jQuery');
});

或

将其与通常编写为的命名导出进行比较

// AMD
define(function () {
  const $ = {...}; // jquery implementation

  return $;
});

// AMD
define(function () {
  const $ = {...}; // jquery implementation

  return {$};
});

或

要导入这样的导出，通常需要编写

// AMD
define(["jquery"], function ($) {
  $('div').text('set via jQuery');
});

// AMD
define(["jquery"], function ($) {
  $.$('div').text('set via jQuery');
});

或

现在回到ES模块世界，
*as
语法将命名的导出绑定聚合到一个对象中，以便进行点（
）访问

与AMD和CommonJS模块形成鲜明对比的是，在ES模块中，导出的所有内容都必须以名称导出

然而，ES模块仍然通过
default
export/import语法和语义提供了导出和导入表示模块本身的单个值的实用性和简单性。这种语法是

// ESM
const something = {...};
export default $;

并且通常作为

// ESM
import $ from 'some-module';

这在概念上类似于分配给
模块。导出
或从
定义
返回单个值，但实际上，
默认
不是匿名的，它是名为
默认
的导出

所以问题变成了，当我们有一个AMD或CommonJS模块将一个值导出为模块本身时（通常使用上述模式之一），我们如何将其导入ES模块<代码>要求

对我们不可用。我们不能输入没有名字的东西。良好的互操作性，而在一定程度上是使

module.exports

或

define

返回的值作为

默认值

导出可用。这带来了许多问题，但它允许我们写作

import $ from 'jquery';

这是可行的，因为可以调用名为

default

的导出。无法调用命名空间

不幸的是，由于ES模块规范的波动，互操作机制的不确定性每次都被指定，并且由于各种历史原因，TypeScript在历史上走了一条不同的路线，采取了不同的策略

import * as imported from 'some-module';

暗示

const imported = require('some-module');

在类型级别。此外，它还没有自动提供导出为AMD和CommonJS模块的值作为

默认值

，这意味着正确的语法可能在运行时失败

然而，TypeScript将解决这个问题

同时，如果您使用模块互操作感知工具，如SystemJS或Webpack3，则可以正确编写

import imported from 'some-module';

今天用打字机。

---

指定

--allowSyntheticDefaultImports

编译器选项，以针对AMD或CommonJS模块启用此语法的正确类型检查。

I也适用于本文。使用与angular 4兼容的新日期选择器，如@MohammadDayyan。很高兴您制作了自己的日期选择器，但这不是角度版本兼容性问题。请尝试

npm update

Hi@Aluan，谢谢您的回复。我尝试了你的建议，但现在出现了一个不同的错误：

C:/Users/../app.component.ts（6,8）：模块“jquery”没有默认导出

。Jquery实际上可以很好地从“Jquery”以$import*的形式使用

import*对此有何想法？我还尝试了从“引导daterangepicker”导入daterangepicker而不是
require（'bootstrap-daterangepicker'）如该教程中所建议。还有一个不同的错误，daterangepicker不是一个函数：
错误类型错误：\uuuuuWebpack\uImported\uModule\u4\ujQuery\uuuu（…）。daterangepicker不是一个函数
您缺少的
--allowSyntheticDefaultImports
请参阅我答案的最后一行。将其添加到您的
tsconfig
从“引导daterangepicker”导入daterangepicker
不起作用，因为datepicker模块不导出任何内容，它对
'jquery'
模块进行了变异。使用
导入'bootstrap daterangepicker'如教程中所述。@AIuan，感谢您的回复。我尝试了这两种更改，jquery再次工作，但我回到了屏幕截图中提到的第一个错误