Question

问题

“ sass”捆绑包包含一个模块sass.dart.js：https://runpkg.com/?sass@1.21.0/sass.dart.js

除其他事项外，其中还包含require的动态用法（已编辑的许多行）：

var self = Object.create(global);
self.require = require;

//...

u($,"N0","Hq",function(){return self.require("readline")})
u($,"Mr","cN",function(){return self.require("fs")})
u($,"MN","Ho",function(){return self.require("chokidar")})

使用require可以防止webpack进行静态分析，从而导致输出错误（也在本要点中），并在捆绑包中创建webpackEmptyContext。这自然是行不通的：）

尝试过的选项

我见过ContextReplacementPlugin，我认为这并不适用，因为用法不是直接的require调用。

我见过noParse，但感觉就像是核方法，我不知道潜在的负面影响是什么。

复制代码

也在this gist

中

index.js：

const sass = require("sass");
console.log(sass);

webpack.config.js：

module.exports = (env) => ({
    entry: "./index.js",
    mode: "development",
    target: "node"
});

package.json：

{
  "devDependencies": {
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"
  },
  "dependencies": {
    "sass": "^1.21.0"
  },
  "scripts": {
    "build": "webpack-cli"
  }
}

目标

如何为该特定模块配置上下文，以将readline / fs / chokidar专门列出为依赖项，从而可能生成仅提供那些值的上下文？

我不介意解决方案是否有点脆弱，是否需要固定dart-sass版本。

Answer 1

我们已经找到了一个“解决方案”，该解决方案实现了一个自定义的，dart-sass特定的加载器，以将代码添加到模块中，从而绕过了静态分析。

sass-prepend-loader.js：

const SASS_PREPEND_CODE = `require = (function () {
  var fs = require("fs");
  var readline = require("readline");
  return function (mod) {
    switch (mod) {
      case "fs": return fs;
      case "readline": return readline;
      default: throw new Error("Unexpected sass dependency");
    }
  };
})();`

module.exports = function(source) {
    this.cacheable();
    this.callback(null, `${SASS_PREPEND_CODE}\n${source}`);
};

webpack.config.js（摘录）：

module: {
    rules: [
        {
            resource: path.resolve(__dirname, "node_modules", "sass", "sass.dart.js"),
            loader: path.resolve(__dirname, "sass-prepend-loader.js"),
        }
    ],
},

这是专门针对当前的“ sass”版本1.20.3以及当前Webpack中的行为而量身定制的。注意：我们没有传递“ chokidar”依赖关系，我们的用例不需要它。

通过分配给require的版本只能用于“ fs”和“ readline”来工作。 Webpack将replace调用替换为__webpack_require__（满足其静态分析的愿望），并允许require（已被阴影处理）保留。

从dist / index.js中提取：

/***/ (function(module, exports, __webpack_require__) {

(function(module, exports, __webpack_require__) {

eval("/* WEBPACK VAR INJECTION */(function(__filename) {var require;require = (function () {\n  var fs = __webpack_require__(/*! fs */ \"fs\");\n  var readline = __webpack_require__(/*! readline */ \"readline\");\n  return function (mod) {\n    switch (mod) {\n      case \"fs\": return fs;\n      case \"readline\": return readline;\n      default: throw new Error(\"Unexpected sass dependency\");\n    }\n  };\n})();\n// make sure to keep this as 'var'\n// we don't want block scoping\nvar self = Object.create(global);\n\nself.scheduleImmediate = self.setImmediate\n    ? function (cb) {\n        global.setImmediate(cb);\n      }\n    : function(cb) {\n        setTimeout(cb, 0);\n      };\n\nself.require = require;

//...

self.require(\"fs\")

希望这是一个临时解决方案，我们可以从以下途径之一中寻求更好的解决方案：

Webpack的“ sass”（dart-sass）用途是否需要动态地将硬代码依赖项放入上下文中？

问题

尝试过的选项

复制代码

目标

1 个答案: