webpack+eslint全局变量设置

webpack-externals暴露全局变量

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。也就是说webpack打包时不会把库打入bundle中！

下面以jQuery为例使用externals进行配置

module.exports = {
    ...
    output: {
      ...
      libraryTarget: "umd"
    },
    externals: {
      jquery: "jQuery"
    },
    ...
 }

官方文档：https://webpack.docschina.org/configuration/externals/

对于 webpack 外部化，通过定义函数来控制行为，可能会很有帮助。例如，webpack-node-externals 能够排除 node_modules 目录中所有模块，还提供一些选项，比如白名单 package(whitelist package)。

函数配置：function (context, request, callback)

函数接收三个入参：

• context (string): 包含引用的文件目录。

• request (string): 被请求引入的路径。

• callback (function (err, result, type)): 用于指明模块如何被外部化的回调函数

回调函数接收三个入参：

• err (Error): 被用于表明在外部外引用的时候是否会产生错误。如果有错误，这将会是唯一被用到的参数。

• result (string [string] object): 描述外部化的模块。可以接受形如 ${type} ${path} 格式的字符串，或者其它标准化外部化模块格式，(string, [string]，或 object)。

• type (string): 可选的参数，用于指明模块的类型（如果它没在 result 参数中被指明）。

module.exports = {
  //...
  externals: [
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        // 使用 request 路径，将一个 commonjs 模块外部化
        return callback(null, 'commonjs ' + request);
      }

      // 继续下一步且不外部化引用
      // 该外部化的模块，是一个 `commonjs2` 的模块，且放在 `@scope/library` 目录中
      callback(null, '@scope/library', 'commonjs2');
    }
  ]};

更多的，还是看官方文档。

eslint 设置全局 变量

需要在.eslintrc.js中加上如下配置：

{
    "globals": {
        "map": true,
        "$": true
  }
}

有了这个配置，eslint 就不会报错了

转载本站文章《webpack+eslint全局变量设置》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2020_1002_8572.html