模块方法

Posted 2021-01-16 qq3279338858

es6

import静态导入

import MyModule from ‘./my-module.js‘;
import { NamedExport } from ‘./other-module.js‘;

• CommonJS
  • 以同步的方式检索其他模块的导出。var myModule = require(‘my-module‘);
  • 以同步的方式获取模块的 ID。webpack 中模块 ID 是一个数字（而在 NodeJS 中是一个字符串 -- 也就是文件名）。require.resolve(dependency: String);
  • 删除模块。多处引用同一个模块，最终只会产生一次模块执行和一次导出，所以提供了这个接口以获取模块缓存。delete require.cache[require.resolve(‘dependency‘)];

import()异步导入

import 规范不允许控制模块的名称或其他属性，因为 "chunks" 只是 webpack 中的一个概念。幸运的是，webpack 中可以通过注释接收一些特殊的参数，而无须破坏规定：

// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  ‘module‘
);

// 多个可能目标
import(
  /* webpackInclude: /.json$/ */
  /* webpackExclude: /.noimport.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  `./locale/${language}`
);

// import的详细注释
// webpackInclude：在导入解析(import resolution)过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包（仅文件名）。
// webpackExclude：在导入解析(import resolution)过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包（仅文件名）。
// webpackChunkName：新 chunk 的名称。从 webpack 2.6.0 开始，[index] and [request] 占位符，分别支持赋予一个递增的数字和实际解析的文件名。
// webpackMode：从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入。
    // "lazy"（默认）：为每个 import() 导入的模块，生成一个可延迟加载(lazy-loadable) chunk。
    // "lazy-once"：生成一个可以满足所有 import() 调用的单个可延迟加载(lazy-loadable) chunk。（这种模式仅在部分动态语句中有意义，例如 import(`./locales/${language}.json`)，其中可能含有多个被请求的模块路径。）
    // "eager"：不会生成额外的 chunk，所有模块都被当前 chunk 引入，并且没有额外的网络请求。仍然会返回 Promise，但是是 resolved 状态。和静态导入相对比，在调用 import（）完成之前，该模块不会被执行。
    // "weak"：尝试加载模块，返回 Promise，但是只有在客户端上已经有该 chunk 时才成功解析。如果该模块不可用，Promise 将会是 rejected 状态，并且网络请求永远不会执行。
// `./locale/${language}`至少需要一些文件的路径信息，webpack打包时会把所有./locale/都打包到一个chunk下

• CommonJS：require.ensure

require.ensure(
  dependencies: String[], // 字符串构成的数组，声明 callback 回调函数中所需的所有模块。
  callback: function(require), // 只要加载好全部依赖，webpack 就会执行此函数。require 函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用 require() 来加载依赖。函数体可以使用此参数，来进一步执行 require() 模块。这里的参数require必须为该名称才能保证被webpack解析
  errorCallback: function(error), 
  chunkName: String // 建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用，我们可以将它们的代码合并到一个单独的 chunk 中，从而只产生一个浏览器必须加载的 bundle。
)

• AMD：requirerequire(dependencies: String[], [callback: function(...)])

export导出

// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
};

• CommonJS：相同
• AMD:define（不能在异步函数中调用？）

define([name: String], [dependencies: String[]], factoryMethod: function(...))
define(value: !Function)

• webpack 内置的 LabeledModulesPlugin 插件，使用require: ‘some-dependency‘;导出，不确定是同步还是异步

export: var answer = 42;
export: function method(value) {
  // 做一些操作……
};