es6 - 从一些没有别名的 js 文件中导入所有函数以创建 webpack 包答案

【问题标题】：es6 - import all function from some js files without alias for create webpack bundlees6 - 从一些没有别名的 js 文件中导入所有函数以创建 webpack 包
【发布时间】：2018-04-14 20:27:30
【问题描述】：

我有很多 js 文件，其中有更多的功能。类似的东西：

// first file
function name1(){...}
function name2(){...}
function name3(){...}
function name4(){...}
...
// ...second file
function name(){...}
...

并且有一个入口点，我想导入该模块并连接所有命名空间以进行 webpack 捆绑，但我不能使用

import * as alias from "modules/myModules";

因为在我的 HTML 中我有属性 onclick，我不写别名。我需要类似的东西：

import { * } from "module/myModules"

在这种情况下我该怎么办？（我是用 HTML 写别名，还是有更好的主意？）

【问题讨论】：

many js modules what have a more function 嗯？
对不起，也许我不知道术语（英语我知道不好，你怎么看），我的意思是我有超过 10 个具有许多功能的 js 文件我正在编辑它，也许这更好地解释了我的问题!
你想把导入的函数组合成一个对象吗？
首先，您的方法声明缺少export 关键字。我假设您确实为您的模块使用了 ES6 命名导出，对吗？
您不能将带有通配符的标识符导入 ES6 模块。但是，您可以使用 webpack 捆绑器选项将某些模块的导出置于全局范围内。

标签： javascript webpack ecmascript-6

【解决方案1】：

考虑到这个线程 (es6 - import all named module without alias) 和 MDN's import spec page，没有 es6 语法可以导入所有没有别名的符号。

此外，最好为您的 javascript 命名空间。良好的命名空间可以防止多个导入之间难以调试的名称冲突。

最后，标签属性样式处理程序只能访问全局定义。根据es6-module-uncaught-referenceerror-function-is-not-defined-at-htmlbuttonelemen，您可以将您的函数添加到全局范围内，也可以通过类似 javascript 的方式附加它

document.querySelector("#container button").addEventListener("click", createNotification);

我建议您使用专用模块将事件绑定到您的页面。这将防止 UI 操作泄漏到您的逻辑中。

【讨论】：

你的意思是最好的方法是在我的 HTML 中更改函数的名称，对吧？
我已经更新了答案。不久，没有。最好通过 addEventListener 来绑定。感谢您的澄清

【解决方案2】：

你可以试试

import "module/myModules";

它应该将您的文件添加到捆绑包中。

【讨论】：