Question

我正在写我的第一个模块。基本上，浏览器和node.js版本的代码完全相同。唯一的区别是浏览器使用XmlHttpRequest，而node.js使用http模块。

这是一个类似于我尝试做的例子。

// test.js

const urlHelper = require('url');

class XmlHttpHandler {
    constructor(xhr) {
        this.xhr = xhr;
    }

    call(url, callback) {
        this.xhr.open('GET', url, true);
        this.xhr.onreadystatechange = () => {
            if(this.xhr.readyState === 4) {
                callback(this.xhr.status);
            }
        }
        this.xhr.send();
    }
}

class HttpHandler {
    constructor(http) {
        this.http = http;
    }

    call(url, callback) {
        const method = "GET";
        const { hostname, port, path } = urlHelper.parse(url);        

        this.http.request({ method, hostname, port, path }, 
        (response) => {
            response.on('data', (chunk) => { });
            response.on('end', () => { callback(response.statusCode); });
        }).end();
    }
}

module.exports = () => typeof navigator !== 'undefined' ? 
    new XmlHttpHandler(new XMLHttpRequest()) : 
    new HttpHandler(require('http'));

Webpack配置是这样的：

const webpack = require('webpack');
const path = require('path');

module.exports = [
    { 
        target: 'web',
        entry: './test.js',
        output: {
            filename: 'test.js',
            path: path.resolve(__dirname, 'dist'),
            libraryTarget: 'umd',
            library: 'test'
        },
        devServer: {
            contentBase: path.join(__dirname, "sandbox")
        }
    },
    { 
        target: 'node',
        entry: './test.js',
        output: {
            filename: 'test.node.js',
            path: path.resolve(__dirname, 'dist'),
            libraryTarget: 'commonjs2'
        }
    }
];

如果我尝试使用node.js这样的模块，它可以工作：

const test = require('./dist/test.node');
test().call('http://localhost:8080', (status) => { console.log(status); });

我想在浏览器和节点版本中只使用一个js。有没有办法用webpack构建一个适用于浏览器和节点的单个js？我希望现在有点清楚。 ; - ）

谢谢，马西莫

Answer 1

我只是想象你的情况，我认为你可以使用ProvidePlugin来实现你的目标。您将为两个模块（XHR或http）定义相同的变量（API？），您的应用程序将使用定义的变量。还有一个条件，你的模块必须暴露相同的功能

使用webpack

1 个答案: