在es6模块中怎么引入传统的jQuery和jQuery插件呢？

最新推荐文章于 2021-08-13 11:33:18 发布

吃不胖的茶叶蛋

最新推荐文章于 2021-08-13 11:33:18 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/twx843571091/article/details/88889194

版权

1、安装webpack和loader

为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。

mkdir demo-webpack && cd demo-webpack
npm init
cnpm install webpack webpack-cli --save-dev
cnpm install expose-loader -D
cnpm install --save jquery

上面的命令，我们创建并初始化了一个demo-webpack项目，然后安装了
webpack webpack-cli expose-loader jquery

注意jquery是--save的，webpack打包的时候会把jquery也打包到bundle.js

2、新建webpack.config.js

const path = require('path');

module.exports = {
    mode:"development",
    entry:"./src/main.js",
    output:{
       path: path.resolve(__dirname, 'dist'),
       filename:"bundle.js"
    },
    module:{
        rules: [
            {
                test: require.resolve('jquery'),
                use: [
                    {
                        loader: 'expose-loader',
                        options: '$'
                    },
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }
                ]
            }
        ]
    }
}

注意： require.resolve('jquery')下面会解释

3、新建src文件夹和main.js(webpack配置文件中的入口文件)

import 'jquery';
import '../public/plugin/banner/js/velocity'
import '../public/plugin/banner/js/shutter'


$(function () {
    $('.shutter').shutter({
        shutterW: 2560, // 容器宽度
        shutterH: 1080, // 容器高度
        isAutoPlay: true, // 是否自动播放
        playInterval: 3000, // 自动播放时间
        curDisplay: 0, // 当前显示页
        fullPage: false // 是否全屏展示
    });
});

当webpack构建时，遇到import 'jquery';,就会告诉expose-loader处理。

第2步创建的webpack配置文件中的这句话require.resolve('jquery'),意思就是 当检测到 import jquery 或者 require('jquery') 时,就把jquery的返回值（这里用返回值描述可能不正确）暴露给window.$或者window.jQuery。结果jQuery对象就绑定到全局window对象上了。

当然，既然在这里已经绑定到window上了，那在其他模块里面就不需要再通过import jQuery导入jQuery了。直接使用即可。

我们在这里（main.js）导入了一个jquery的轮播插件shutter.js，直接使用就好。

4、修改package.json,添加一个脚本，用于执行webpack打包命令

"scripts": {
    "webpack": "webpack --progress --display-modules --colors --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

5、执行npm run webpack
若没错误，即可生成 dist\bundle.js

6、在页面里引入这个bundle.js就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>演示</title>

    <link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">
</head>
<body>
        
    <div class="shutter">
        <div class="shutter-img">
        <a href="#" data-shutter-title="Iron Man"><img src="../public/img/河南大屏1.jpg" alt="#"></a>
        <a href="#" data-shutter-title="Super Man"><img src="../public/img/河南大屏2.jpg" alt="#"></a>
        <a href="#" data-shutter-title="The Hulk"><img src="../public/img/河南大屏3.jpg" alt="#"></a>
        <a href="#" data-shutter-title="The your"><img src="../public/img/河南大屏4.jpg" alt="#"></a>
        <a href="#" data-shutter-title="The your"><img src="../public/img/河南大屏 5.jpg" alt="#"></a>
        </div>
        <ul class="shutter-btn">
        <li class="prev"></li>
        <li class="next"></li>
        </ul>
        <div class="shutter-desc">
        <!-- <p>Iron Man</p> -->
        </div>
    </div>

    <script src="../dist/bundle.js"></script>
</body>
</html>

引入babel 编译es6语法

我们在main.js中加入这样一句lamda表达式
export const calculator = num => num * num; 然后，执行npm run webpack
用IE11打开index.html会发现报错了(chrome和firefox等现代浏览器不报错)

为了解决这个错误，我们需要引入babel 和 babel-polyfill

1、安装babel依赖 cnpm install babel-loader babel-core babel-preset-env --save-dev

2、在webpack.config.js中增加规则：

module:{
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }
    ]
}

babel-polyfill官方：https://babeljs.io/docs/en/babel-polyfill

现在再打包一次，刷新一下IE浏览器，错误已经没有了。

当需要用到更新颖的es6语法时，需要引入babel-polyfill (安装babel-polyfill是为了‘垫’出一个环境)

3、安装 babel-polyfill cnpm install --save babel-polyfill: 注意不是 --save-dev

4、~~在入口文件(main.js)的顶部导入 import "babel-polyfill";或者下一步~~

5、With webpack.config.js, add babel-polyfill to your entry array:
entry: ["babel-polyfill", "./src/main.js"]

步骤4、5不加好像也行

在模块里引入css文件

我们在index.html里引入了一个css文件

<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">

现在我们要把它打包到bundle.js里，所以在main.js里导入它
import '../public/plugin/banner/css/shutter.css' 同时注释掉
<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">

1、只是这样还不行，我们还需要安装三个loader style-loader css-loader url-loader

cnpm install --save-dev style-loader  css-loader  url-loader

style-loader 是把打包好的css插入到html页面中的
url-loader: 因为图片中引用了图片路径，所以需要它处理

2、在webpack.config.js中增加这几条规则

{
    test: /\.css$/,
    use: ['style-loader','css-loader']
},
{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192
            }
        }
    ]
},

重新运行 npm run webpack ，打开页面，一切正常

使用 HtmlWebpackPlugin 插件

我们打包出来的dist目录只有一个bundle.js,而我们的index.html是在src目录下的。
现在我想把index.html也打包到dist目录，这样我发布的时候只需要拷贝dist就行了。
（如果现在发布，需要打包dist、src、public-图片）

1、安装插件 cnpm install --save-dev html-webpack-plugin

2、修改webpack.config.js

//在文件顶部增加
var HtmlWebpackPlugin = require('html-webpack-plugin');

//然后再增加
plugins: [
    new HtmlWebpackPlugin({
        title:"webpack自动演示系统",
        template:"./src/index.html"
    })
]

3、修改index.html的title

<title><%= htmlWebpackPlugin.options.title %></title>

4、执行打包，index.html就拷贝到dist\index.html了

怎么把html中引入的图片打包到dist目录？

<a href="#" data-shutter-title="Iron Man"><img src="../public/img/河南大屏1.jpg" alt="#"></a>

使用html-loader:

网上很多人说用 html-withimg-loader,我试了是可以的，但是还是用官方的html-loader吧！

1、安装 cnpm install -D html-loader file-loader
html-loader 依赖file-loader,如果不安装file-loader，打包的时候会报错的。

2、增加配置

{
    test: /\.(html)$/,
    use: {
        loader: 'html-loader',
        options: {
            attrs: ['img:src']
        }
    }
},

同时修改一下图片处理的loader

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
                name: 'img/[hash:8].[name].[ext]'
            }
        }
    ]
}

增加了一行 name: 'img/[hash:8].[name].[ext]' 主要是为了打包后生成的图片名称美观一点，默认是一串16进制的字符串。

3、npm run webpack ,查看dist/index.html里图片链接已变成 img/***.jpg了

怎么把html中引入的视频也打包到dist目录？

和上面一样，不过要修改一下html-loader(增加video:src),同时增加一个url-loader检测mp4文件

{
    test: /\.(html)$/,
    use: {
        loader: 'html-loader',
        options: {
            attrs: ['img:src', 'video:src']
        }
    }
},
{
    test:/\.(mp4)$/,
    use:[
        {
            loader:"url-loader",
            options:{
                limit:10000,
                name:'video/[name].[ext]'
            }
        }
    ]
}

如果页面中有 <video id="centerVideo" src="../static/img/centervideo.mp4" controls autoplay loop></video> ,那么打包后的 src地址也会被修改。

安装 clean-webpack-plugin

clean-webpack-plugin 用于清理文件

1、npm install --save-dev clean-webpack-plugin

2、

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin(['dist'])
],

这是我的示例代码【欢迎访问】： gitee: demo-webpack

吃不胖的茶叶蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在es6模块中怎么引入传统的jQuery和jQuery插件呢？

1、安装webpack和loader为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。mkdir demo-webpack && cd demo-webpacknpm initcnpm install webpack webpack-cli --sa...
复制链接

扫一扫