Question

cldr-data是一个npm模块，它包含Unicode CLDR数据，这个数据很大（~250 MB，大量的JSON文件）。开发人员可以直接挑选JSON文件，例如require("cldr-data/supplemental/likelySubtags")，或者他们可以使用其API，例如require("cldr-data")("supplemental/likelySubtags")（显然会相对于模块return require("./" + path)。）

直接挑选JSON文件时，webpack解决了简单的要求，并且工作正常。

// "cldr-data/supplemental/likelySubtags.json" is a JSON file.
var likelySubtags = require("cldr-data/supplemental/likelySubtags");

快速构建：

$ npm run build

> globalize-hello-world-webpack@ build /tmp/globalize-hello-world-webpack
> webpack

Hash: 4cb435ab9977c41bb6e0
Version: webpack 1.9.12
Time: 420ms
    Asset    Size  Chunks             Chunk Names
bundle.js  323 kB       0  [emitted]  main
   [0] ./main.js 1.26 kB {0} [built]
    + 18 hidden modules

使用API时，webpack会因为“依赖的请求是表达式”而感到疯狂。

// "cldr-data/supplemental/likelySubtags.json" is a JSON file.
var cldrData = require("cldr-data");
var likelySubtags = cldrData("supplemental/likelySubtags");

looooooong密集型CPU破坏版本：

npm run build
Hash: 74a65b11c84ec356ac8d
Version: webpack 1.9.12
Time: 496679ms
    Asset    Size  Chunks             Chunk Names
bundle.js  173 MB       0  [emitted]  main
   [0] ./main.js 1.54 kB {0} [built]
   [1] . ^\.\/.*$ 363 bytes {0} [built] [3 warnings]
   [2] ./README.md 0 bytes [optional] [built] [failed]
   [4] ./output/bundle.js 323 kB {0} [optional] [built]
   [6] ./webpack.config.js 359 bytes {0} [optional] [built]
    + 12155 hidden modules

WARNING in ./main.js
Critical dependencies:
10:1-39 the request of a dependency is an expression
7:1-44 the request of a dependency is an expression
8:1-42 the request of a dependency is an expression
9:1-42 the request of a dependency is an expression
11:1-49 the request of a dependency is an expression
12:1-50 the request of a dependency is an expression
13:1-44 the request of a dependency is an expression
14:1-45 the request of a dependency is an expression
15:1-45 the request of a dependency is an expression
 @ ./main.js 10:1-39 7:1-44 8:1-42 9:1-42 11:1-49 12:1-50 13:1-44 14:1-45 15:1-45

WARNING in ./~/cldr-data/DCO.md
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/DCO.md Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| If you would like to make a contribution to cldr-data-npm, please certify to the following:
| 
| ---
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/LICENSE
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/LICENSE Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
| 
|     Unicode Data Files include all data files under the directories
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/LICENSE-MIT
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/LICENSE-MIT Line 1: Unexpected number
You may need an appropriate loader to handle this file type.
| Copyright (c) 2013 Rafael Xavier de Souza http://rafael.xavier.blog.br
| 
| Permission is hereby granted, free of charge, to any person
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/README.md
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # cldr-units-modern
| 
| This repository provides the a portion of the JSON distribution of CLDR locale data
 @ ./~/cldr-data ^\.\/.*$

WARNING in ./~/cldr-data/install.js
Module parse failed: /tmp/globalize-hello-world-webpack/node_modules/cldr-data/install.js Line 50: Illegal return statement
You may need an appropriate loader to handle this file type.
|     "listed under `dependencies` of the `package.json` of your application."
|   );
|   return process.exit(0);
| }
| 
 @ ./~/cldr-data ^\.\/.*$

WARNING in . ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ . ^\.\/.*$

WARNING in . ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ . ^\.\/.*$

WARNING in ./README.md
Module parse failed: /tmp/globalize-hello-world-webpack/README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # Hello World (Webpack)
| 
| Project loading `globalize` through `webpack`:
 @ . ^\.\/.*$

ERROR in ./~/cldr-data/Gruntfile.js
Module not found: Error: Cannot resolve module 'matchdep' in /tmp/globalize-hello-world-webpack/node_modules/cldr-data
 @ ./~/cldr-data/Gruntfile.js 40:2-23

cldr-data exported API使用动态请求，这让webpack变得疯狂。我认为require contexts可以帮助我在#196的情况下帮助我。但是，我不知道如何。

在此处查找问题文件：https://github.com/unindented/globalize-hello-world-webpack/。

非常感谢任何帮助。

由于

Answer 1

如果您想要浏览require.context，那么在消费者方面看起来就像这样：

var req = require.context('cldr-data/supplemental');
var likelySubtags = req('./likelySubtags.json');

这对我来说并不是很好。我试图反对require.context('cldr-data')但是我们再次陷入缓慢构建的世界。我认为在这种情况下，它必须遍历整个包，以便它可以构建查找。

var likelySubtags = require('cldr-data/supplemental/likelySubtags');对我来说似乎是最安全的选择。

也许在它们之间可能存在一个隐藏require.context内容的Webpack适配器？您可以轻松地使用require('cldr-data').supplemental('likelySubtags'). That req part can be dynamic so this should work. You would just write the missing ./ and。json`等API。当然，您可以根据自己的喜好自由更改API。这只是我提出的第一个想法。

Answer 2

简短的回答是使用像require("cldr-data/<path>")这样的静态字符串。

如果您真的想使用API，请根据How to prevent moment.js from loading locales with webpack?使用ContextReplacementPlugin插件。虽然，API的好处（例如.entireMainFor("en")）会丢失，因为您必须重复更改插件以反映您需要的内容。例如：

var webpack = require("webpack");

module.exports = 
...
  plugins: [
    new webpack.ContextReplacementPlugin(/cldr-data$/, /supplemental/)
  ]
};

感谢@bebraw和@sokra的所有帮助。

如何避免webpack加载不必要的包文件？

2 个答案: