如何使用Webpack导出函数

jpfvwuh4 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(311)

我打算用webpack捆绑我所有的.js。我试着用一个非常简单的例子如下。
要捆绑在test.js文件中的函数：

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

Webpack配置：

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

要测试的代码：

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

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

<script type="text/javascript">

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

</body>
</html>

但我收到以下错误：未捕获的引用错误：未定义测试
问：为什么？
[编辑]响应为：“export”丢失。因此，我更新如下：
要导出的代码：

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

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

Webpack会议：

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

要创建对象，我必须做到：var t =新测试.Test（）;这有点重......只有有办法才得搞：变量t =新测试（）;？

webpack

来源：https://stackoverflow.com/questions/45817227/how-to-export-function-with-webpack

2条答案

按热度按时间

vcirk6k61#

为甚么？
因为您没有从入口点导出任何内容，并且默认情况下，webpack以umd格式生成输出，而不会污染全局范围。
首先必须导出函数：

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

然后在您的webpack配置文档中指定“library”和“libraryTarget”。例如：

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

这将生成添加window.test = _entry_return_.default的代码。

赞(0）回复(0）举报 2022-11-13

t0ybt7op2#

从webpack 5开始，您可以导出到变量，而不是将方法绑定到全局window。
因此，当您像这样导出函数时：

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

并将库类型配置为var（在早期版本的webpack 5中为libraryTarget）：

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

您可以像这样存取您的方法：

myLibrary.test()

赞(0）回复(0）举报 2022-11-13

我来回答

如何使用Webpack导出函数

2条答案

相关问题

热门标签

最新问答