当使用Webpack为浏览器导出Node模块时，避免使用default对象。

Question

我敢肯定这很简单，但这让我感到困惑！我为浏览器便捷功能维护了一些NPM模块，当父应用程序使用require或import然后将它们与Webpack捆绑在一起时，它们可以正常工作。但是，考虑到无数的用户环境，我想在Github的dist目录中为需要将其包含在<script>标签中的用户提供一个独立的包。

简而言之，问题在于，当我使用Webpack制作可用于浏览器的模块per the Webpack instructions时，暴露给window的对象始终是一个Module，只有一个属性default，其中包含函数本身。

例如，我的elastic-svg是一个超级简单的工具，可以使SVG像div那样调整大小，并智能地调整内容的大小，这样导出：

export default function elasticSVG(selector, opts) { source

我将Webpack配置保存在模块外部，以免混淆源代码，如下所示：

{
  entry: './index.js',
  output: {
    path: path.resolve(process.cwd(), "./dist"),
    filename: 'elasticSVG.js',
    library: 'elasticSVG',
    libraryTarget: 'umd'
  },
  mode: 'development',
  devtool: 'inline-source-map',
  externals: [nodeExternals()],
  // relevant modules and rules etc.

这一切都很好，但是当我在dist/elasticSVG.js的examples/demo.html中测试文件时，会看到以下内容：

当然，有一种简单的方法可以导出模块，例如，像普通的老式模块一样，window.elasticSVG是函数本身吗？这可能会解决我不关心的另一个问题，这就是为什么可以在Node中工作的原因：

import elasticSVG from 'elastic-svg';

但此无效有效：

import * as elasticSVG from 'elastic-svg';

不是大问题，但我想了解原因。由于环境变化如此之快，因此Google很难做到！我尝试了多种其他export语法，但收效甚微。谢谢！

Answer 1

这是将多个问题组合成一个问题，

首先为什么要这样做

import elasticSVG from 'elastic-svg';

虽然这不起作用

import * as elasticSVG from 'elastic-svg';

是因为您正在导出默认导出，所以可以使用任何名称导入默认导出，因此以下操作也可以

import elasticSVGMYSepcialName from 'elastic-svg';

另一方面

import * as elasticSVG from 'elastic-svg';

是指以elasticSVG名称从该模块导入所有已命名的导出，在您的情况下，您没有导出任何已命名的变量，因此这将无法工作。

现在，如果您希望webpack将函数直接注入到窗口中，则需要将libraryExport添加到webpack中的输出对象

output: {
    path: path.resolve(process.cwd(), "./dist"),
    filename: 'elasticSVG.js',
    library: 'elasticSVG',
    libraryTarget: 'umd',
    libraryExport: "default"
  },

libraryExport将配置您的库（elasticSVG）从入口点模块/命名空间（您的./index.js文件）中公开哪个模块。