Question

我正在开发一个库，我希望它同时适用于节点和浏览器。

假设我有这个库文件mylibrary.js：

module.exports = {
  add: function (a, b) {return a + b;},
  sub: function (a, b) {return a - b;}
};

我可以在节点应用程序中很好地使用它，如下面的fun.js：

const mylibrary = require('mylibrary'); // CommonJS style
import {add, sub} from 'mylibrary';     // UMD style

var x = mylibrary.add(1, 2); // method 1
var y = add(1, 2);           // method 2

两种方法都可以正常运行。

现在我希望能够通过以下方式在浏览器中使用它：

<script src="mylibrary.min.js"></script>
<script>
    var x = add(1, 2); // doesn't work! Using mylibrary.add() will work
    var y = sub(1, 2); // but I want to use sub() directly; not mylibrary.sub()
</script>

我希望直接在浏览器中公开add()和sub()，而无需用户使用任何名称对其进行限定（我知道通常建议使用通用名称对库中的所有函数进行分组避免名称空间冲突;但在我的情况下这是好的。）

目前我正在使用以下webpack.config.js，但它会在名为add()的对象下公开sub()和mylibrary。因此，在浏览器中，用户必须编写我想要避免的mylibrary.add()。

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: './lib/mylibrary.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'mylibrary.min.js',
    libraryTarget: 'umd',
    library: 'mylibrary' // need to avoid this for the browser
  }
};

有什么想法吗？

Answer 1

关注webpack config page，请使用以下配置：

implementation 'com.neenbedankt.gradle.plugins:android-apt:1.8'
annotationProcessor 'com.google.auto.value:auto-value:1.2'
annotationProcessor 'com.ryanharter.auto.value:auto-value-parcel:0.2.4-rc2'

所以libraryTarget是＆＃39; window＆＃39;和未定义的库

Webpack - 直接导出所有函数以在浏览器中使用

1 个答案: