2

我正在尝试编写一个自定义 webpack 加载器，用于加载演示 javascript 文件及其源代码以用于文档目的。它应该

  • 加载指定的 javascript 文件（例如Simple.demo.js）
  • 将文件的原始源作为新字段附加到默认导出

完成后，我应该能够在我的 webpack 配置中配置加载程序：

{
    test: /\.demo.js$/,
    exclude: /node_modules/,
    use: [{
       loader: "babel-loader",
    }, {
       loader: resolve("./demo-loader.js"),
    }]
}

…然后在导入后访问我的演示的源代码：

import SimpleDemo from 'demo-loader!./Simple.demo.js';                  
console.log(SimpleDemo.__source__);
SimpleDemo(); //run the demo code

尝试 1

我已经使用以下加载器成功加载了原始源并完成了命名导出：

const { readFile } = require("fs");
const escapeSource = require("js-string-escape");

module.exports = function withSourceLoader(content, map, meta) {
    const onComplete = this.async();
    const fileName = this.resource;
    readFile(fileName, (error, fileContents) => {
        if ( error ) {
            return onComplete(error);
        }
        const exportSource = `export const rawSource = "${ escapeSource(fileContents)}";`;
        const newContent = `${ content }\n\n${ exportSource }`;

        onComplete(null, newContent, map, meta);
    });
};

这让我做

import SimpleDemo, { rawSource } from 'demo-loader!./Simple.demo.js`;                  
console.log(rawSource);
SimpleDemo(); //run the demo code

…但我想将整体SimpleDemo作为一个对象传递给另一个函数，所以我想将它们作为一个块导入（会有很多演示）。

尝试 2

因为我不知道演示文件中用于默认导出的内部变量名称（没有进行完整的 AST 解析），所以我不能只在文件中附加一行来修改它。相反，我尝试编写一个导入和重新导出默认值的包装文件，如下所示：

const { readFile } = require("fs");
const { basename } = require("path");
const escapeSource = require("js-string-escape");

module.exports = function withSourceLoader(content, map, meta) {
    const onComplete = this.async();
    const fileName = this.resource;
    readFile(fileName, (error, fileContents) => {
        if ( error ) {
            return onComplete(error);
        }
        const newContent = `
             const rawSource = "${ escapeSource(fileContents) }";
             import DemoDefault from './${ basename(fileName) }';
             DemoDefault.__source__ = rawSource;
             export default DemoDefault;
        `;

        onComplete(null, newContent, map, meta);
    });
};

我希望这个新import指令会被 webpack 解决（我知道这可能会导致无限回归，因为它应该只是根据文件名再次触发相同的加载器）。然而，这似乎没有发生 - 我只是得到

TypeError: _Simple_demo_js__WEBPACK_IMPORTED_MODULE_0__.default is undefined

这似乎是因为 webpack 已经构建了它的依赖关系树并且不想向其中添加任何其他内容。我也尝试过使用 arequire()而不是import，这并没有改善问题。

我会以错误的方式解决这个问题吗？我想通过结合其他加载器的输出来使用简单的链接，但 API 似乎没有办法做到这一点。

4

1 回答 1

1

想出如何使用webpack“投球”加载器来做到这一点：

const { readFile } = require("fs");
const escapeSource = require("js-string-escape");
const { stringifyRequest } = require("loader-utils");

module.exports = function empty() { /* do nothing */ };

module.exports.pitch = function withSourceLoader(remainingRequest) {
    const onComplete = this.async();
    const filename = this.resource;
    readFile(filename, (error, fileContents) => {
        if ( error ) {
            return onComplete(error);
        }
        const newContent = `        
            module.exports = require(${stringifyRequest(this, "!!" + remainingRequest)});
            const rawSource = "${ escapeSource(fileContents) }";
            module.exports.default.__source__ = rawSource;
        `;

        onComplete(null, newContent);
    });
};

仍然不是 100% 清楚我的require()电话是如何解决的，但效果很好！我计划在本周晚些时候作为一个模块发布（带有一些其他功能）。

于 2019-02-12T12:33:50.527 回答