在 Webpack 中读取已解析路径的文件答案

【问题标题】：Read a file at resolved path in Webpack在 Webpack 中读取已解析路径的文件
【发布时间】：2016-12-10 16:42:09
【问题描述】：

我有一个节点模块，我想让它与 webpack 兼容。我目前正在使用以下模式：

const fs = require('fs');
const someTemplate = require.resolve('./templates/template.css');

fs.readFile(someTemplate, 'utf8', (err, templateStr) => {
  // Do something with`templateStr`
});

问题是require.resolve 将返回模块 ID（编号）而不是路径，当然对数字执行 readFile 操作会失败。

如何使它与 node 和 Webpack 兼容。

【问题讨论】：

与webpack兼容是什么意思？
您是否遇到特定问题？要回答这个问题，需要描述“与 node 和 webpack 兼容”的确切含义以及您遇到的任何错误或问题的详细信息。
问题是require.resolve 将返回模块ID（数字）而不是路径，当然对数字执行readFile 操作会失败。所以代码在 Webpack 中是行不通的。
github.com/webpack/css-loader

标签： javascript node.js webpack babeljs

【解决方案1】：

我不得不深入挖掘才能找到这个。

似乎可以通过使用一些browserify插件和webpack来解决。

下面的答案是复制粘贴，因为 SO 不允许仅链接的答案

假设你有以下 Node 源：

var test = require('fs').readFileSync('./test.txt', 'utf8');

在npm install transform-loader brfs --save 之后，将以下加载程序添加到您的配置中：

module.exports = {
    context: __dirname,
    entry: "./index.js",
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "transform?brfs"
            }
        ]
    }
}

这是你的链接：https://github.com/webpack/transform-loader#typical-brfs-example

【讨论】：

感谢您的回答。我想我正在寻找一种不添加加载程序的方法。它不必与我在原始问题中使用的模式相同。也许最好的办法就是将template.css 导出为template.css.js 中的字符串。
transform-loader 插件已经 2 年没有更新了，而且这种方法似乎不再起作用 - 我尝试时收到以下错误：SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
SO 不接受仅链接答案的原因是有原因的，您刚刚成功了。链接已失效（不再记录无效的锚点）

【解决方案2】：

Webpack 捆绑 js 代码以供前端使用。浏览器没有fs模块，也做不到readFile。您可以使用 webpack 将 template.css 转换为有效的 js 和 require 它，或者使用一些 webpack loader 即时进行此类转换。

【讨论】：

Webpack 捆绑了很多东西的代码，而不仅仅是“前端使用”。它广泛用于无服务器部署，例如
这个问题被标记为node.js 而不是浏览器，它也在描述中他正在构建一个节点模块

【解决方案3】：

接受的答案已经过时并且不再起作用（加载器的名称已更改并且 babel 存在问题），这是使其工作的更新

第一次运行npm install transform-loader brfs --save-dev

您需要在与您的 webpack 配置相同的目录中添加一个文件 brfs.js

brfs.js

const brfs = require('brfs');

module.exports = function ModuleBrfs(resource) {
    return brfs(resource, {
        parserOpts: {
            sourceType: 'module'
        }
    })
};

并使用 transform-loader 修改你的 webpack 配置 webpack.config.js

const path = require('path');
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'transform-loader?'+path.resolve('brfs.js')
                    },
                    // The transform loader must be before all other loaders
                    // so if you need babel, add it after this line
                    {
                        loader: 'babel-loader',
                    }
                ]
            }
        ]
    }
    // ...
}

【讨论】：