使用webpack output.target选项创建ES6模块“等效” [英] Create ES6 module 'equivalent' using webpack output.target options

问题描述

首先，道歉！我努力总结标题中的问题，所以请随时修改。

Firstly, apologies! I struggled summing up the issue in the title so please feel free to amend.

假设我有两个公开默认函数的ES6文件

Suppose I have two ES6 files that expose default functions

// file_1.js
export default function(){ /* do the thing */ }

// file_2.js
export default function(){ /* do the other thing */ }

现在我使用以下输出配置使用webpack（w / babel loader）将 file_1 捆绑到一个模块中

Now I bundle file_1 into a module using webpack (w/ babel loader) using the following output configuration

// webpack config 1.
{
   ...
   entry : '/path/to/file_1.js'
   output : {
      path: '/where/it/goes/',
      filename : 'main.js',
      library: 'my_component',
      libraryTarget: 'var'
   }
}

我还有一个最小的 package.json 所以它可以导入为npm模块 {name：'file_1'，main：'main.js' }

I also have a minimal package.json so it can be imported as a npm module { name: 'file_1', main: 'main.js' }

现在，当我想将来自 file_1 的代码和模块 file_2 捆绑在一起时，挑战就出现了

Now the challenge comes when I want to bundle together the code from file_1 and the module file_2 and a uniform manner.

// master_entry.js

const components = {
    file_1 : require('file_1'),
    file_2 : require('/path/to/file_2')
}

如果我捆绑上面的内容并查看组件的结果形式，它看起来就像这样

If I bundle the above and look at the resulting form of components it looks like so

console.log(components.file_1)
// outputs
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module" }

console.log(components.file_2)
// outputs
Module {default: f, __esModule: true, Symbol(Symbol.toStringTag): "Module" }

因此对于 file_2 （没有预先捆绑）我有默认功能 - 这就是我想要的。捆绑 file_1 时如何实现相同的目标？

Hence for file_2 (which was not prebundled) I have the default function available - which is what I want. How do I achieve the same thing when bundling file_1?

我尝试过使用webpack 输出选项，例如库， libraryTarget ， libraryExport 。然而，我有点迷失，现在已经花了很长时间在文档中 - 因此请求帮助！

I have tried playing around with the webpack output options such as library, libraryTarget, libraryExport. However I am a bit lost and have spent far to long in the docs now - hence the cry for help!

提前致谢。

file_1.js -webpack-> ; package file_1 （入口点 file_1.js ）
master_entry -webpack-> main.js

file_1.js -webpack-> package file_1 (entry point file_1.js) master_entry -webpack-> main.js

即，webpack首先在 file_1.js 上运行，然后在导入 file_1 package和 file_2.js 。

I.e, webpack is running first on file_1.js and subsequently upon the combination of importing the file_1 package and file_2.js.

推荐答案

我我认为我有一个解决方案;）

I think I have a solution ;)

// file_1.js
export default function file1(){ console.log('file_1') }

// file_2.js
export default function file2(){ console.log('file_2') }

webpack.config.js应如下所示

The webpack.config.js should look like this

entry: {
  file1: './sources/js/file_1.js',
  file2: './sources/js/file_2.js',
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: './[name].js',
  library: '[name]',
  libraryExport: 'default',
  libraryTarget: 'umd', // you can use libraries everywhere, e.g requirejs, node 
  umdNamedDefine: true,
},

从现在起你有权访问：

<script>
  new file1(); // console.log show file_2
  new file2(); // console.log show file_2
</script>

您现在也可以将选项传递给函数。看看我的解决方案

You can also now pass options to functions. Take a look at my solution

这篇关于使用webpack output.target选项创建ES6模块“等效”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！