问题标签 [javascript-import]

我正在使用Vue.js但只是JS文件而不是vue文件，并且我正在将一个组件导入到我的 main 中app.js，如下所示：

它可以很好地导入它，但我正在尝试访问这些全局变量。在人们因为使用全局变量而毁掉我之前，你能告诉我这是否可能。

无论我在变量之前还是之后包含它，它都不会读取apiRoot或包含在该组件中。acfApiRoot

它工作的唯一方法是如果我在我的组件文件中声明变量autoPosts.js

我有一个文件，它按模块名称从我的模块modules.js中导出所有导出（在索引文件中的 ES6 导出/导入之后）：default

在我的app.js中，我想导入这个模块包。

我希望从 a...z 中导入导出的变量，module.js以便我可以在app.js.

显然我不想做

因为这是非常冗长的，每当我添加一个模块时module.js，我也必须更改importin app.js。

我试过了

但变量在app.js.

问题：我如何简单地将所有命名的导出导入 到它们的导出名称下？

示例模块./modules/a/a.js：

我正在学习 node.js 并且想知道为什么它使用require语法而不是importReact 使用的语法。

IE

const Validator = require("validator");

VS

import Validator from "validator";

我相信import是 es6，但我认为这不能解释为什么它不在节点中使用。

我需要读取一个 json 文件并使其在整个应用程序中可用。我的方法是（从这个资源中提取）：

资产/js/routes.json：

资产/js/router.js：

资产/js/base/pltbl.js：

它在app.blade.php中调用：

但是当 app.blade.php 被渲染时，在控制台中弹出以下错误：

当 Webpack 发现它认为不存在的导入时，它会非常方便地显示警告：

这很好，但如果能够接收到实际错误会更好，理想情况下会出现在 webpack 开发服务器overlay选项中。有没有办法做到这一点

我正在尝试创建一个通过 Typescript 编写的 React 组件库，该组件库应导入另一个 Typescript 项目。准确地说，我想将 Analytics 图表库导入故事书中以进行演示和测试。

为此，我将这些依赖项用于库：

• “打字稿”：“^3.1.6”
• “webpack”：“^4.15.1”
• "babel-loader": "^8.0.4"
• “ts-loader”：“^5.3.0”
• "@babel/core": "^7.1.5",
• "@babel/runtime": "^7.1.5",
• "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
• "@babel/plugin-syntax-dynamic-import": "^7.0.0",
• "@babel/preset-env": "^7.1.5",
• 还有很多...

我为故事书提供了这些额外的依赖项：

• “@storybook/react”：“^4.0.4”
• 上面提到的所有其他人
• 还有很多...

此外，我在库的 tsconfig.json 中有以下设置：

• “模块”：“esnext”，
• "moduleResolution": "节点",
• “目标”：“es5”（这是故意的）
• 等等

Webpack 生成一个整洁的 d.ts 文件，其中（除其他外）包含：

最后但同样重要的是，libraryTarget 是 UMD。

现在，当我尝试像这样在故事书中导入库时：

然后做一个

我明白了

在控制台中。这并不完全有用，因为我期望的是我可以使用的对象（如 d.ts 中所定义）。.

所以，我一定是在做和/或误解一些关于出口和进口的根本错误。如果有人能指出正确的方向，我将不胜感激。让我知道是否需要更多详细信息。

非常感谢

沃尔特

编辑： 最小的项目设置

• 在“分析”文件夹中，运行“yarn install && yarn run dist”
• 转到文件夹“storybook”并运行“yarn install && yarn start-storybook”
• 打开浏览器并转到 localhost:6006
• 检查开发控制台
• 留意以“你去！”开头的消息。
• 我希望有一个包含所有分析工厂的对象，而不是一个模块或未定义的......

我正在练习使我的 webpack 包更小，并使用 webpack 的包分析器，我看到一个非常重的包被包含在两个不同的异步块中，即使它只使用了一次。在对我的代码进行了一些挖掘之后，我意识到这可能是因为以下情况：

文件1.js

文件2.js

文件 3.js

我假设由于 file1 全局导入重包，而 file2 从 file1 导入一个函数，因此它将重包作为依赖项获取，即使它没有导入实际使用该包的函数。我希望（或者更确切地说，希望）只有 file3 的块包含重度依赖项，因为它是唯一使用它的地方。

我应该以特定的方式处理这样的导入吗？也许我可以在 webpack 中做一个神奇的配置来帮助解决这个问题，一种更好的构建模块/函数的方法，或者只是更好的导入函数/模块/包的方法？

我正在使用 webpack 4，我在 ES2017

我正在我的项目中编写一个 Vue 单页组件，该组件是使用Laravel Mix捆绑的。我想将一些逻辑提取到它自己的类中，以便可以轻松地在其他组件中重用它（但这不是应该是 Vue 组件本身的逻辑）。

我创建了一个新类并将其放在TimeRangeConverter.js与我的 Vue 组件相同的目录中。

在我的组件中，我像往常一样导入它：

但是 Vue 抛出一个错误说ReferenceError: TimeRangeConverter is not defined.

我正在使用webpack.mix.jsLaravel 5.7 附带的默认配置文件：

在我的主app.js文件中，我会自动包含 Vue 组件：

将此类导入Vue组件以供使用的正确方法是什么？

我知道我们可以使用并且将从同一目录中导入import {x} from "./file"一个变量。如果目录中存在具有不同扩展名的同名文件，如何处理？xfile.js

例如，如果有file.js和file.ts在同一个目录中，会如何import {x} from "./file"表现？它会取决于 JavaScript 的版本吗？

我正在导入许多 FA 图标：

如何声明该列表一次然后重新使用它？它会是一个数组吗？或者一个对象……什么？

我刚在想

但这当然行不通。我会做什么library.add()？

后面那个看起来像物体的东西是import什么？