要求/导入语句不起作用答案

【问题标题】：Require/import statements don't work要求/导入语句不起作用
【发布时间】：2017-08-13 13:23:28
【问题描述】：

我在将语义 UI 日历 npm 模块加载到我的应用程序中时遇到问题。

我已经使用脚本标签成功地将它加载到我的 HTML 中，

但每次我尝试将其加载到我的应用程序中时都会出错。

在标准的 HTML/JS/CSS 应用程序中，

我已经尝试像这样将它加载到我的 index.js 中

var Semantic = require('semantic-ui-calendar');


$(function() {


  $('#example1')Semantic.calendar();

});

我总是收到这个错误：“Uncaught SyntaxError: Unexpected identifier”

我也尝试将 require 语句放在“文档就绪”函数中，但无济于事。

我有点困惑是否可以为模块分配任意变量值。

documentation 没有指定命名空间，所以我只是使用 Semantic 作为我的变量名。我在这里错过了什么吗？

我怀疑的另一件事是因为这个包使用了 Bower 和 Gulp（我真的不知道这两个东西），也许在浏览器中需要不同的协议来要求这个包？

谁能指出我正确的方向。请，谢谢！

【问题讨论】：

$('#example1')Semantic.calendar(); 看起来不对。你想做什么？
在我的html中，我有一个div
Input

当我将 semantic-calendar-ui 作为链接包含在内时，调用 $( '#example1')日历();在我的 js 文件中完美运行。但是现在，由于我想使用语义日历 UI 作为 NPM 包，我的理由是我需要将库分配给任意值“语义”，并且我将 .calendar() 方法从库中拉出。
require() 无法在开箱即用的浏览器中运行，您使用的是 requirejs 还是类似的东西？

【解决方案1】：

问题在于 require 实际上并不是 vanilla js 的一部分，因为浏览器实现了它。 Bower/gulp 以浏览器可以支持的方式添加它，但它也添加了一个额外的步骤，您必须为浏览器构建代码。

为了使用require，您需要使用添加它的构建工具，并在您的源代码上执行额外的构建步骤。

【讨论】：