webpack入门(六) API in modules
A quick summary of all methods and variables available in code compiled with webpack. 用webpack编译的一些变量和方法的快速总结
Basic
require
CommonJs
require(dependency: String)
Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.
Style: CommonJs 从依赖的exports返回,调用是同步的,没有请求到服务器,编译器确保依赖可用。
Example:
var $ = require("jquery");
var myModule = require("my-module");
define
(with factory)
define([name: String], [dependencies: String[]], factoryMethod: function(...))
The name argument is ignored. If the dependencies
array is provided, the factoryMethod will be called with the exports of each dependency (in the same order). If dependencies
is not provided the factoryMethod is called with require
, exports
and module
(for compatibility!). If the factoryMethod returns a value, this value is exported by the module. The call is sync. No request to the server is fired. The compiler ensures that each dependency is available.
Style: AMD name参数会被省略,如果提供了依赖数组,factiryMethod会被每一个输出的依赖调用(依次调用),如果没有提供依赖,factoryMethod就会被require,exports和modules调用(为了兼容),如果factoryMethod返回一个值,这个值就会被模块导出。调用是同步的,没有请求到服务器,编译器确保依赖可用。
Example:
define(["jquery", "my-module"], function($, myModule) {
// Do something with $ and myModule.
// Export a function
return function doSomething() {
// Do something
};
});
Note: Can NOT be used in an async function. 注意,不能再异步函数中使用
module.exports
This value is returned, when that module is required. It’s default value is a new object. 当加载该模块的时候,这个值会被返回。默认值为一个新对象
Style: CommonJs
Example:
module.exports = function doSomething() {
// Do something
};
Note: Can NOT be used in an async function. 不能用于异步函数
exports
The exported object. It’s the default value of module.exports
. If module.exports
gets overwritten, exports
will no longer be exported.
Style: CommonJs 导出的对象。是module.exports的默认值。如果module.exports被覆盖,exports不再被导出。
exports.someValue = 42;
exports.anObject = {
x: 123
};
exports.aFunction = function doSomething() {
// Do something
};
Note: Using it in an async function may not have the expected effect.
define
(with value)
define(value: !Function)
Just exports the provided value
. The value
cannot be a function. 只导出提供的值(value),这个值不能为函数
Style: AMD (for compatibility!)
Example:
define({
answer: 42
});
Note: Can NOT be used in an async function.
export
(label)
export: value
Export the defined value. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported. 导出定义的值,这个label可以在函数或者变量声明之前发生。函数和变量名是导出值的标识符
Style: Labeled modules dependencies.LabeledModulesPlugin
Example:
export: var answer = 42;
export: function method(value) {
// Do something
};
Note: Using it in an async function may not have the expected effect. 在移步函数里用它可能达不到预期的效果。
require
label
require: "dependency"
Make all exports from the dependency available in the current scope. The require
label can occur before a string. The dependency must export values with the export
label. CommonJs or AMD modules cannot be consumed. 使所有导出的依赖在当前作用域可用。require可以传入字符串生成。依赖必须被export lavel导出,不能被commonjs或者amd模块消费。
Style: Labeled modules dependencies.LabeledModulesPlugin 标记模块
Example:
// in dependency
export: var answer = 42;
export: function method(value) {
// Do something
};
require: "dependency";
method(answer);
require.resolve
require.resolve(dependency: String)
Returns the module id of a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.
The module id is a number in webpack (in contrast to node.js where it is a string, the filename). 返回依赖模块的id,同步调用。没有请求到服务器,编译器确保依赖可用模块id在webpack中是一个数字(相反在nodejs中它是一个字符串,是文件名)
Style: CommonJs
Example:
var id = require.resolve("dependency");
typeof id === "number";
id === 0 // if dependency is the entry point
id > 0 // elsewise
module.id
The module id of the current module. 当前模块的id
Style: CommonJs
Example:
// in file.js
module.id === require.resolve("./file.js")
Advanced
require.cache
Multiple requires to the same module result in only one module execution and only one export. Therefore a cache in the runtime exists. Removing values from this cache cause new module execution and a new export. This is only needed in rare cases (for compatibility!). 同一个模块被请求多次的结果就是只有一个米克被执行,只有一个导出。因此在运行时在缓存里。从缓存中删除一个值就会造成新的模块执行和一个新的导出。这是只在罕见的情况下需要这么做(为了兼容!)。
Style: CommonJs
var d1 = require("dependency");
require("dependency") === d1
delete require.cache[require.resolve("dependency")];
require("dependency") !== d1
// in file.js
require.cache[module.id] === module
require("./file.js") === module.exports
delete require.cache[module.id];
require.cache[module.id] === undefined
require("./file.js") !== module.exports // in theory; in praxis this causes a stack overflow
require.cache[module.id] !== module
require.context
require.context(directory:String, includeSubdirs:Boolean /* optional, default true */, filter:RegExp /* optional */)
Example:
var context = require.context('components', true, /\.html$/); var componentA = context.resolve('componentA');
Style: webpack
require.ensure
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
Download additional dependencies on demand. The dependencies
array lists modules that should be available. When they are,callback
is called. If the callback is a function expression, dependencies in that source part are extracted and also loaded on demand. A single request is fired to the server, except if all modules are already available.
This creates a chunk. The chunk can be named. If a chunk with this name already exists, the dependencies are merged into that chunk and that chunk is used.
Style: CommonJs 按需加载额外模块。依赖模块数组列表是可用的,如果可用,callback就会被调用。如果callback是一个函数表达式。源部分的依赖就会被提取和按需加载。只发送一个请求到服务端,除非所有请求都可用。它创建chunk,这个chunk可被命名。如果chunk名已经存在,这个依赖就会被合并到该chunk并且这个chunk被用过。
Example:
// in file.js
var a = require("a");
require.ensure(["b"], function(require) {
var c = require("c");
});
require.ensure(["d"], function() {
var e = require("e");
}, "my chunk");
require.ensure([], function() {
var f = require("f");
}, "my chunk");
/* This results in:
* entry chunk
- file.js
- a
* anonymous chunk
- b
- c
* "my chunk"
- d
- e
- f
*/
require
AMD
require(dependencies: String[], [callback: function(...)])
Behaves similar to require.ensure
, but the callback is called with the exports of each dependency in the dependencies
array. There is no option to provide a chunk name.
Style: AMD 和require.ensure差不多,但是回调函数被每个dependencies数组里的依赖调用,没有提供chunk名的选项。
Example:
// in file.js
var a = require("a");
require(["b"], function(b) {
var c = require("c");
});
/* This results in:
* entry chunk
- file.js
- a
* anonymous chunk
- b
- c
*/
require.include
require.include(dependency: String)
Ensures that the dependency is available, but don’t execute it. This can be use for optimizing the position of a module in the chunks.
Style: webpack 确保依赖可用,但是不会执行它,这个可用于优化模块在chunks中的位置。
Example:
// in file.js
require.include("a");
require.ensure(["a", "b"], function(require) {
// Do something
});
require.ensure(["a", "c"], function(require) {
// Do something
});
/* This results in:
* entry chunk
- file.js
- a
* anonymous chunk
- b
* anonymous chunk
- c
Without require.include "a" would be in both anonymous chunks.
The runtime behavior isn't changed.
*/
module.loaded
This is false
if the module is currently executing, and false
if the sync execution has finished.
Style: node.js (for compatibility!) 如果现在在模块正在执行,这项为false,如果同步执行完,也为false。
module.hot
Style: webpack
global
See node.js global
Style: node.js
process
See node.js process
Style: node.js
__dirname
Depending on the config option node.__dirname
: 取决于node.__dirname选项
false
: Not definedmock
: equal “/“true
: node.js __dirname
If used inside a expression that is parsed by the Parser, the config option is threaded as true
. 如果用在分析器解析的表达式中,配置选项则为真。
Style: node.js (for compatibility!)
__filename
Depending on the config option node.__filename
: 取决于node.__filename选项
false
: Not definedmock
: equal “/index.js”true
: node.js __filename
If used inside a expression that is parsed by the Parser, the config option is threaded as true
. 同上
Style: node.js (for compatibility!)
__resourceQuery
The resource query of the current module. 当前模块的资源查询。
Style: webpack
Example:
// Inside "file.js?test":
__resourceQuery === "?test"
__webpack_public_path__
Equals the config options output.publicPath
. 和output.publicPath一样
Style: webpack
__webpack_require__
The raw require function. This expression isn’t parsed by the Parser for dependencies.
Style: webpack 原始加载函数,这个表达式没有被解析器解析为依赖关系。
__webpack_chunk_load__
The internal chunk loading function. Takes two arguments:内部块加载函数。 设置两个参数:
chunkId
The id for the chunk to load. 加载chunk的idcallback(require)
A callback function called once the chunk is loaded. 一旦chunk被加载,callback函数就会被调用
Style: webpack
__webpack_modules__
Access to the internal object of all modules.访问所有模块的内部对象。
Style: webpack
require.resolveWeak
Like require.resolve
, but doesn’t include the module into the bundle. It’s a weak dependency.
Style: webpack 像 require.resolve但不包括包里的模块,是个弱依赖
Example:
if(__webpack_modules__[require.resolveWeak("module")]) {
// do something when module is available
}
if(require.cache[require.resolveWeak("module")]) {
// do something when module was loaded before
}
__webpack_hash__
Access to the hash of the compilation. 对编译的哈希的访问。
Only available with the HotModuleReplacementPlugin
or the ExtendedAPIPlugin
Style: webpack
__non_webpack_require__
Generates a require
function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.
生成一个require函数,不会被webpack解析。如果可用,可以使用一个全局函数来做很酷的事情。
Style: webpack
DEBUG
Equals the config option debug 和debug配置选项相等
Style: webpack
webpack入门(六) API in modules的更多相关文章
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...
- webpack入门指南(基于webpack v4.41.2)
2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...
- 爬虫入门六 总结 资料 与Scrapy实例-bibibili番剧信息
title: 爬虫入门六 总结 资料 与Scrapy实例-bibibili番剧信息 date: 2020-03-16 20:00:00 categories: python tags: crawler ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门(转载)
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- webpack入门和实战(二):全面理解和运用loader和plugins
您的阅读目录: 一.理解webpack加载器loader 二.理解less-loader加载器的使用 三.理解babel-loader加载器的使用 四.webpack命令行常见使用的操作 五.用web ...
随机推荐
- asp.net core前后端分离
陆陆续续的看了两个礼拜的前端知识,把vue+vue-router+axios的知识撸了一遍,本来想加个element-ui来实现一下前后端分离,实施的时候却遇到了很多的坑.我本身不在一个软件开发公司上 ...
- C#复习笔记(3)--C#2:解决C#1的问题(泛型)
这一章会描述在C#2中所做的主要的变化 泛型 泛型的概念中包含类型参数和类型实参,类型参数相当于类型实参的蓝图. 泛型类型分为未绑定泛型类型和已构造泛型类型.已构造泛型类型又分为开放的泛型类型和封闭的 ...
- EntityFrameworkCore中的实体状态
Entry表示一个追踪,里面有state属性,是EntityState的枚举类型. 每一个实体都有一个相对应的Entry: var entry = dbContext.ChangeTracker.En ...
- Azure系列2.1.10 —— CloudBlobClient
(小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...
- [转帖]一个ip对应多个域名多个ssl证书配置-Nginx实现多域名证书HTTPS
一个ip对应多个域名多个ssl证书配置-Nginx实现多域名证书HTTPS https://home.cnblogs.com/u/beyang/ 一台服务器,两个域名 首先购买https,获取到CA证 ...
- nodejs 利用zip-local模块压缩文件夹
var zipper = require("zip-local"); zipper.sync.zip("./folder").compress().save(& ...
- Linux基础学习笔记3-用户权限
本章内容 用户user 令牌token,identity Linux用户:Uername/UID 管理员:root,0 普通用户:1-65535 系统用户:1-499,1-999(Centos7) 对 ...
- python数据结构与算法第十二天【快速排序】
1. 原理如图所示: 2.代码实现 def quick_sort(alist, start, end): """快速排序""" # 递归的退 ...
- nodejs zip 安装配置
1.下载 下载地址:https://nodejs.org/zh-cn/download/ 选择相应的版本下载 2.解压缩 将文件解压到要安装的位置,并新建两个目录 node-global :npm全局 ...
- 【C/C++】C/C++中的数组是怎么实现的?
几乎所有的语言都把数组作为一种固有的数据类型,数组也是我们最常用的数据结构之一.在语言底层,数组是如何实现的呢?本文以抽象数据类型的形式,定义.实现数组. 创建数组,理论上,我们可以使用创建任意维度的 ...