webpack系列——webpack3导入jQuery的新方案

amc 发布于2019-08-21 17:44 / 2134人阅读

摘要：但是，有时候可能的一些库不够牛逼，还需要用到的相关插件来辅助完成，这些插件又和形成了依赖，最终，和我一样，你也可能需要在中导入。关于异步打包组件的方案，请看我的其他文章只要你使用了，无论是，还是开发者也同样适用这种方案

本文的目的 拒绝全局导入jQuery！！ 拒绝script导入jQuery！！ 找到一种只在当前js组件中引入jQuery，并且使用webpack切割打包的方案！ 测试环境

以下测试在webpack3.8.1，jQuery3.2.1，react16+中进行

思路分析

如果说要我在react中全局引入jQuery，我是十分感动，然后拒绝的。

但是，有时候可能react的一些库不够牛逼，还需要用到jQuery的相关插件来辅助完成，这些插件又和jQuery形成了依赖，最终，和我一样，你也可能需要在react中导入jQuery。

这个时候webpack就派上用场了，你也别百度了，网上的方案我试过很多，说句不好听的，大部分都是乐色！

举个例子，很多博客说用下面这种方案，还有其他一堆乱七八糟的辅助方案。

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "window.$": "jquery",
  });

一开始的尝试，我以为是成功的，因为$可以打印出来了啊！但是，当我打印jQuery的时候，报错了!!

jQuery is not defined

接着，就是一个漫长的探索过程，我以为是CMD的锅、我以为是AMD的锅、我还以为是ES6的锅、甚至我坚定的认为是webpack的锅！！

最终答案

最终我发现就是webpack的锅，幸好webpack提供了另外一种支持方案。

1、安装expose-loader

npm install --save expose-loader

2、在webpack.config中加入下面这段loader代码

{
   test: require.resolve("jquery"),
   use: [{
      loader: "expose-loader",
      options: "jQuery"
   },{
      loader: "expose-loader",
      options: "$"
   }]
}

3、下面该干嘛？放心，你什么都不用干了，接着很轻松的在你的react组件中导入jQuery

import React from "react"

require("jquery")
require("jQuery第三方插件")

class Components extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
         $(document).ready(function() {
            //做爱做的事情
        })
    }
}

4、这里可能还存在一个小坑，就是很多jQuery第三方插件的作者写的代码不规范，我就遇到了一些变量没有声明的情况，在那些老程序员眼里，js变量不声明表示全局变量，但在webpack眼里，你不声明就未定义了！如果你遇到jQuery插件未定义的报错，通常给这个变量加上var就行了！

5、最后，我自己写的组件本身已经融入了异步打包功能，所以当前包含jQuery的react组件不会污染其他react组件，不会导致其他组件的体积变大，也不会导致公共js的体积变化，前提是你也实现了react组件的异步加载功能。

6、关于webpack异步打包组件的方案，请看我的其他文章！

只要你使用了webpack，无论是react，还是vue开发者也同样适用这种方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89937.html

webpack3从零开始配置过程

摘要：配置过程基本的入口出口配置入口输出目录这里使用方法是为了消除跨平台的差异因为和的绝对路径表示方式不一样添加基本的加载器导入中加入对象使用的目标文件。 webpack配置过程基本的入口出口配置 const webpack = require(webpack); const path = require(path); module.exports = { entry: { m...

PingCAP 2019-08-22 18:25 评论0 收藏0
翻译webpack3.5.5 - code splitting - 上半部分

摘要：澄清一个共同的误解代码分离不仅仅是抽出公共代码把它们放进一个共享的块中。让我们来使用来移除这个重复的部分。插件将会注意到我们已经将分割成一个单独的块。并且从我们的主中删除了这部分。对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载...

Bryan 2019-08-20 18:54 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
webpack4系列教程（六）：使用SplitChunksPlugin分割代码

摘要：在默认情况下，仅仅影响按需加载的代码块，因为更改初始块会影响文件应包含的脚本标记以运行项目。属性用来选择分割哪些代码块，可选值有所有代码块，按需加载的代码块，初始化代码块。 1. SplitChunksPlugin的概念起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依...

golden_hamster 2019-08-02 14:06 评论0 收藏0