Webpack之Shimming

妖狐艹你老母 2024-04-17 22:27 80阅读 0赞

### 文章目录 ###

*  引入
 *  使用
 *  this

# 引入 #

首先在`index.js`内写如下内容：

import _ lodash from 'lodash';
    import {
         test } from './test';
    console.log(_.join(['a','b','c'], ''));

然后在`test.js`中：

console.log(_.join(['1','2','3'], ''));

打包后在浏览器中打开，控制台是会输出一个错误的。错误是说“\_”是未定义的。明明我们在`index.js`中引入了`lodash`为什么还说未定义呢？

原因在于Webpack打包之后，各模块之间耦合度非常低，模块中引入的东西只能在本模块内生效。

要想解决这个问题，可以在`test.js`顶部添加一行代码将`lodash`重新引入。

不过如果使用的是第三方模块，模块内使用了大量的全局变量该怎么办？

这就需要用到`ProvidePlugin`这个插件了。

# 使用 #

在Webpack的配置文件中配置：

const webpack = require('webpack');
    module.exports = {
        
        plugins: [
            webpack.ProvidePlugin({
        
                _: 'lodash'
            })
        ]
    }

这样配置之后，Webpack遇到“\_”就会自动引入`lodash`。

# this #

在模块中，`this`并不是指向`window`对象，而是指向`module.exports`。

如果我们想让`this`指向`window`对象，我们需要用到`imports-loader`

在配置文件中配置：

{
        
        module: {
        
            rules: [
                {
        
                    test: /\.css$/,
                    use: 'imports-loader?this=>window'
                }
            ]
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，80人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack之resolve

文章目录 * resolve.extensions * * 注意 * resolve.mainFiles * resolve.alias re...

墨蓝/ 2024年04月18日 15:41/ 0 赞/ 71 阅读

相关 Webpack之DLL

文章目录 * 引入 * 流程 * 问题引入在我们的项目中，免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之...

矫情吗；*/ 2024年04月18日 15:37/ 0 赞/ 71 阅读

相关 Webpack之Shimming

文章目录 * 引入 * 使用 * this 引入首先在`index.js`内写如下内容： import _ lodash from '...

妖狐艹你老母/ 2024年04月17日 22:27/ 0 赞/ 81 阅读

相关 Webpack之Plugins

文章目录 * 概念 * HTMLWebpackPlugin * * 使用 * clean-webpack-plugin * * 使用 ...

旧城等待，/ 2024年04月17日 14:16/ 0 赞/ 83 阅读

相关 require.js shim 配置

最近的项目用到了require.js 记录一下 require.config的参数配置原因：理论上，require.js加载的模块，必须是按照AMD规范、用def

- 日理万妓/ 2023年02月08日 12:59/ 0 赞/ 19 阅读

相关 Microsoft Fakes——Shims简介

本文来源于我在InfoQ中文站翻译的文章，原文地址是：[http://www.infoq.com/cn/news/2012/06/deep-dive-fakes][http_w

朴灿烈づ我的快乐病毒、/ 2022年06月10日 02:57/ 0 赞/ 165 阅读

相关学习webpack（二）之 webpack配置

简述 > 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你

我不是女神ヾ/ 2022年04月03日 14:20/ 0 赞/ 372 阅读

相关 webpack 之 resolve

Resolve webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScri

怼烎@/ 2022年03月25日 03:52/ 0 赞/ 220 阅读

相关 JavaScript术语：shim 和 polyfill

原文出处：[https://www.html.cn/archives/8339][https_www.html.cn_archives_8339] 在学习和使用 JavaSc

灰太狼/ 2022年03月22日 13:20/ 0 赞/ 221 阅读

相关 shim是什么？

Vue响应式原理中说道：Object.defineProperty是Es5中无法shim的特性，那么这里的shim是什么呢？ shim可以将新的API引入到旧的环境中，而且

拼搏现实的明天。/ 2021年12月07日 15:05/ 0 赞/ 240 阅读