webpack2.x 中文文档 翻译 之 依赖管理 Dependency Management

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack2.x 中文文档 翻译 之 依赖管理 Dependency Management脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

依赖管理 DePEndency Management

该条已在webpack2.x中文网存在,点击这里


es6 modules

commonjs

amd

表达式来调用 require wITh exPression

当你的请求包含表达式,那个一个上下文环境将被创建。这个需要的模块被编译的时候是未知的。
例子:

require("./template/" + name + ".ejs")@H_126_41@;

webpack 解析require语句,并且摘出一些信息:

Directory: ./template
Regular exPRession: /^.*.ejs$/

上下文模块 context modules

一个上下文模块(context module)被生成之后,它包含目录模块的所有引用,并且能够被一个相匹配的正则表达式调用。
上下文模块包含一个map,能够把请求翻译成模块的id。

例子:

{
    "./table.ejs": 42,
    "./table-row.ejs": 43,


    "./directory/folder.ejs": 44
}

上下文模块(context module)也包含一些运行时逻辑(runtime LOGic)--可以访问到map。

这意味着支持一步调用,但是这也会导致所有相关的模块将被包含在bundle(被编译后的文件)中。

require.context

你可以创建自己的上下文,通过使用require.context方法(函数)。
它允许传递一个路径,正则表达式和一个标记——如果子目录允许被搜索匹配的话。

webpack 在这个上下文模块被创建的时候解析require.context()函数。

语法如下:

require.context(directory, useSubdirectories = false, regExp = /^.//)

例子:

require.context("./


", false, /.test.js$/);
// test文件中所有的以`test.js`结尾的文件将能够被调用,这就是该语句创建的上下文环境。
require.context("../", true, /.stories.js$/);
// 一个包含所有父文件夹和子及后代文件夹中以`.stories.js结尾的文件的上下文。

context module API

一个上下文模块(context module)导出一个(require)函数,它包含一个参数——一个请求。
这个函数有三个属性:resolve, keys, id.

  • resovle 一个函数,返回请求模块的id。

  • keys 一个函数,返回一个数组,包含上下文模块能够处理的所有的请求。
    这个在你想要调用匹配到的所有的文件时很有用,例如:

function importAll (r) {
r.keys().foreach(r);
}
importAll(require.context('../components/', true, /.js$/));
VAR cache = {};
function importAll (r) {
r.keys().forEach(key => cache[key] = r(key));
}
importAll(require.context('../components/', true, /.js$/));
// At build-time cache will be polulated with all required modules.
  • id 是指上下文模块的id,这个也许在module.hot.accept中很有用。

脚本宝典总结

以上是脚本宝典为你收集整理的webpack2.x 中文文档 翻译 之 依赖管理 Dependency Management全部内容,希望文章能够帮你解决webpack2.x 中文文档 翻译 之 依赖管理 Dependency Management所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。