如何使用 webpack 导出 function

Question

I intend to bundle all my.js using webpack.我打算使用 webpack 捆绑所有 my.js。 I tried with a very simple example as following.我尝试了一个非常简单的示例，如下所示。

Function to bundle in a test.js file: Function 捆绑在 test.js 文件中：

function test() {
  console.log('hello');
}

Webpack configuration: Webpack配置：

module.exports = [{
  {
    output: {
      filename: 'test.js',
      path: __dirname + '/public/javascript/dist'
    },
    entry: [
      './public/javascript/test.js'
    ]
  }
]

Code to test:测试代码：

<html>
<head></head>
<body>

    <script src="./javascript/dist/test.js"></script>

<script type="text/javascript">

window.onload = function()
{
    test();
}

</body>
</html>

But I receive the following error: Uncaught ReferenceError: test is not defined.但我收到以下错误：未捕获的 ReferenceError：未定义测试。

Question: why?问：为什么？

[Edit] Reponse is: "export" is missing. [编辑] 响应是：缺少“导出”。 Thanks to that, I updated as following:多亏了这一点，我更新如下：

Code to export:导出代码：

export function Test() {
  this.t = 1;

  Test.prototype.toto = function()
  {
    console.log('hello')
  }
}

Webpack conf: Webpack 配置：

{
output: {
  filename: 'test.js',
  path: __dirname + '/public/javascript/dist',
  library: 'test',
  libraryTarget: 'window'
},
entry: [
  './public/javascript/poc/test.js'
]
}

To create the object, I have to do: var t = new test.Test();要创建 object，我必须这样做： var t = new test.Test(); It's a bit heavy... Is there a way to only have to make: var t = new Test();有点重...有没有办法只需要制作： var t = new Test(); ? ?

Answer 1

why? 为什么？

Because you haven't exported anything from your entry point and, by default, webpack generates output in umd format without polluting global scope. 因为您没有从入口点导出任何内容，并且默认情况下，webpack以umd格式生成输出而不会污染全局范围。

You first have to export your function: 首先必须导出您的功能：

export default function test() {
  console.log('hello');
}

Then specify "library" and "libraryTarget" in your webpack config. 然后在webpack配置中指定“library”和“libraryTarget”。 Docs . 文件。 For example: 例如：

output: {
  filename: 'test.js',
  path: __dirname + '/public/javascript/dist',
  library: 'test',
  libraryTarget: 'window',
  libraryExport: 'default'
},

this will generate code that adds window.test = _entry_return_.default . 这将生成添加window.test = _entry_return_.default代码。

Answer 2

Since webpack 5 you're able to export to a variable instead of binding methods to the global window .由于 webpack 5 您可以导出到变量而不是将方法绑定到全局window 。

So when you are exporting your function like so:因此，当您像这样导出 function 时：

export default function test() {
  console.log('hello');
}

And configure the library type to var ( libraryTarget in earlier versions of webpack 5):并将库类型配置为var （ libraryTarget 5 早期版本中的 libraryTarget）：

output: {
  filename: 'test.js',
  path: __dirname + '/public/javascript/dist',
    library: {
      name: 'myLibrary',
      type: 'var',
    },
  }

You can access your method like so:您可以像这样访问您的方法：

myLibrary.test()

如何使用 webpack 导出 function

问题描述

2 个解决方案

解决方案1
14 2017-08-22 12:17:45

解决方案2
0 2022-09-27 13:49:15

如何使用 webpack 导出 function

问题描述

2 个解决方案

解决方案1 14 2017-08-22 12:17:45

解决方案2 0 2022-09-27 13:49:15

解决方案1
14 2017-08-22 12:17:45

解决方案2
0 2022-09-27 13:49:15