为什么“exports-loader"Webpack 文档中的示例不起作用? [英] Why does the "exports-loader" example in Webpack's documentation not work?

问题描述

Webpack 在其匀场文档中提供了以下示例.在该页面的全局导出部分，给出了以下示例.

Webpack provides the example below in its shimming documentation. In the global exports portion of that page, it gives the following example.

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'); }
};

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

But when I attempt to build, I get:

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

为什么 globals.js 不能解析，为什么他们文档中的例子假设可以解析?我错过了什么吗?谢谢.

Why is globals.js not resolving, and why does the example in their documentation assume it will? Am I missing something? Thanks.

推荐答案

使其与全局 exports-loader 配置一起工作

我有以下设置:

Getting this to work with a global exports-loader configuration

I have this working with the following setup:

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

src/deps.js // this file just declare a global file variable

const file = 'this is the file';

src/app.js//webpack 包的入口点.它import 的deps.js(即使deps.js 没有export 语句，感谢export-loader):

src/app.js // entry point of the webpack bundle. It import's deps.js (even if deps.js does not have an export statement, thanks to export-loader):

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

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

webpack.config.js // webpack configuration file

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

package.json//这样我们就可以在项目本地运行 webpack

package.json // so we can run webpack locally to the project

{
  "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/ 位于项目的根目录中，请执行:

With this setup, assuming webpack.config.js, package.json and src/ are in the root of the project, do:

$ npm run webpack

要捆绑脚本，然后:

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

$ node dist/main.js to check that the file variable is being loaded (to load this in a browser will do the same).

(这来自另一个答案).

为此，您只需要use exports-loader，在webpack.config 中加载它时无需任何进一步的配置.js:

In order to do so, you need to use just the exports-loader, without any further configuration when you load it in the webpack.config.js:

use: 'exports-loader',

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

And then specify the variables to wrap in an export clause in every import statement:

从'exports-loader?file!./deps.js'导入文件

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

I really don't know. The test clause expects a regex as far as I know (that's why it is called test in fact, because of the test method of regex's in javascript) and I'm not used to other kind of valid syntaxes. I see that in your snippet:

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

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

The use value does not have string quotes. I wonder if this is broking the config and then you get a misleading error, I don't know. I actually believe you just didn't paste the quotes when copy and pasting to stack overflow.

这篇关于为什么“exports-loader"Webpack 文档中的示例不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！