有没有办法多次要求一个文件作为不同的模块答案

【问题标题】：Is there a way to require one file multiple times as different modules有没有办法多次要求一个文件作为不同的模块
【发布时间】：2016-12-29 11:32:41
【问题描述】：

我需要在我的 .js 和 .less 文件之间共享一个常量。我的解决方案是包含两个步骤：

创建一个扩展名为 .const 的单独文件，其中包含所有共享 const。它具有 javascript 模块语法，将正常执行。
创建一个加载器，它会根据需要此源的文件的扩展名更改源代码。因此，例如，如果需要 .less 文件，则代码将转换为更少的表达式

但我找不到根据需要的模块从一个源文件创建两个模块的方法。

我的条件加载器的源代码，做的东西：

module.exports = function(content, sourceMap) {
    var _ = require('lodash');
    var loaderUtils = require('loader-utils');
    var reasonResource = this._module.reasons[0].module.resource;
    var reasonResourceExtension = _.last(reasonResource.split('.'));

    switch (reasonResourceExtension)
    {
        case 'js':
        case 'const':
            var query = loaderUtils.parseQuery(this.query);
            if(query.cacheable && this.cacheable)
                this.cacheable();

            return content;
            break;
        case 'less':
            var consts = this.exec(content, this.resource);

            return JSON.stringify(consts);
            break;
        default:
            throw new Error('Not supported import .const modules from ' + reasonResourceExtension.green);
    }
};

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

您可以使用 require loader 语法在您的 less 文件中指定一个 json-to-less 加载器（不确定这是否存在，但应该不难编写）：

@import "!json-to-less-loader!constants.json";

然后只需创建一个 less 文件 (constants.less) 来进行此导入并公开常量。从那里，您可以照常导入constants.less。

我找到了一个相反的加载器 (less-to-json-loader)。因此，您可以使用它并将常量存储在 .less 文件中，并创建一个 constants.js 文件，该文件导入和公开 constants.less 中的常量：

constants.less

@test: 20rem;
@test2: @test/2;

constants.js

module.exports = require("!less-to-json-loader!./constants.less");

【讨论】：

【解决方案2】：

问题出在less-loader。它没有应用在webpack.config.js 中配置的加载器。所以解决方案是增加参数化less-loaderloaders列表的能力

Pull request

然后就可以开始写Constants.const的内容了

export.modules = { debug: true }

然后在Utilities.less中要求它

@import (reference) 'Const.const';

应用了这个加载器

module.exports = function(content, sourceMap) {
    var _ = require('lodash');
    var loaderUtils = require('loader-utils');
    var reasonResource = this._module.reasons[0].module.resource;
    var reasonResourceExtension = _.last(reasonResource.split('.'));
    var query = loaderUtils.parseQuery(this.query);

    switch (reasonResourceExtension)
    {
        case 'js':
        case 'const':
            if(query.cacheable && this.cacheable)
                this.cacheable();

            return content;
            break;
        case 'less':
            if(query.cacheable && this.cacheable)
                this.cacheable();

            var consts = this.exec(content, this.resource);
            var str = '';
            (function append(consts, prefix = '')
            {
                for (var key in consts)
                {
                    let value = consts[key];
                    if (value.constructor != Object) {
                        str += '@' + prefix + key + ': ' + toLessCssValue(consts[key]) + ';';
                    } else {
                        throw new Error('Nested objects not supported in .const files');
                    }
                }
            }(consts));

            return str;
            break;
        default:
            throw new Error('Not supported import .const modules from ' + reasonResourceExtension.green);
    }

    function toLessCssValue(value) {
        if (isNaN(value)) {
            return value;
        } else {
            return 'unit(' + value + ', px)';
        }
    }
};

【讨论】：