为什么 Webpack 文档中的 "exports-loader" 示例不起作用？

Question

Webpack 在该页面的 shimming documentation. In the global exports 部分提供了以下示例，它给出了以下示例。

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('globals.js'),
                use: exports-loader?file,parse=helpers.parse
            }
        ]
    }
}

./src/globals.js

var file = 'blah.txt';
var helpers = {
    test: function() { console.log('test something'); },
    parse: function() { console.log('parse something'); }
};

但是当我尝试构建时，我得到：

ERROR in ./webpack.config.js
Module not found: Error: Can't resolve 'globals.js' in '/workspace/my-app'

为什么 globals.js 没有解决，为什么他们的文档中的示例假设它会解决？我错过了什么吗？谢谢。

Answer 1

让它与全局 `exports-loader` 配置一起工作

我使用以下设置进行工作：

src/deps.js // 这个文件只是声明了一个全局 file 变量

const file = 'this is the file';

src/app.js // webpack 包的入口点。它 import 的 deps.js（即使 deps.js 没有 export 语句，感谢 export-loader）：

import file from './deps.js'
console.log(file);

webpack.config.js // webpack 配置文件

module.exports = {
  entry: __dirname + '/src/app.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /deps.js/,
        use: 'exports-loader?file',
      }
    ]
  }
}

package.json // 所以我们可以运行 webpack 本地到项目

{
  "name": "exports-loader-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "node_modules/webpack/bin/webpack.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "exports-loader": "^0.7.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

使用此设置，假设 webpack.config.js、package.json 和 src/ 在项目的根目录中，执行：

$ npm run webpack

要捆绑脚本，则：

$ node dist/main.js 检查是否正在加载 file 变量（在浏览器中加载它也是如此）。

让它与 `import` 特定配置一起工作。

（来自this other answer）。

为此，您只需要 use exports-loader，在 webpack.config.js:

中加载它时无需任何进一步配置

use: 'exports-loader',

然后在每个 import 语句中指定要包装在 export 子句中的变量：

import file from 'exports-loader?file!./deps.js'

为什么 `require.resolve()` 语法不起作用？

我真的不知道。据我所知，test 子句需要一个正则表达式（这就是为什么它实际上被称为 test，因为 javascript 中正则表达式的 test 方法）并且我'我不习惯其他类型的有效语法。我在您的代码段中看到了这一点：

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('globals.js'),
                use: exports-loader?file,parse=helpers.parse
            }
        ]
    }
}

use 值没有字符串引号。我想知道这是否破坏了配置然后你得到一个误导性错误，我不知道。我实际上相信你只是在复制和粘贴到堆栈溢出时没有粘贴引号。

为什么 Webpack 文档中的 "exports-loader" 示例不起作用？

Why does the "exports-loader" example in Webpack's documentation not work?

javascript

webpack

exports-loader

让它与全局 exports-loader 配置一起工作

让它与 import 特定配置一起工作。

为什么 require.resolve() 语法不起作用？

让它与全局 `exports-loader` 配置一起工作

让它与 `import` 特定配置一起工作。

为什么 `require.resolve()` 语法不起作用？