10 Webpack 如何集成第三方js库

正文

本篇主要介绍如何集成常用的js库（即如何在我们的js中使用js库），以jquery 为例，同理可扩展到其他js库

 

集成jquery.min.js

我的的jquery.min.js文件在 ./src/lib 目录中，如何集成到我们的项目中？

1.在src目录下增加 pathmap.json，代码如下：

{

    "jquery": "jquery.min.js",

    ......

}

当在js中使用import $ from 'jquery'; 时，会替换成import $ from 'jquery.min.js';，其中的原因在webpack.config.js配置中，往下看

 

2. 配置webpack.config.js

var path = require("path");

// 获取 pathmap.json 的 json 对象

var pathMap = require('./src/pathmap.json');

// 生成lib的路径，为 绝对路径+/src/lib

var libPath = path.resolve('./src/lib');



module.exports = {

    devtool: 'eval-source-map',

    entry: __dirname + "/Account/account.jsx",

    output: {

        path: __dirname + "/build",

        filename: "account.js"

    },

    module: {

        rules: [

            {

                test: /\.(js|jsx)$/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['es2015', 'react'],

                    }

                },

                exclude: /node_modules/

            }

        ]

    },

    resolve: {

        extensions: ['.js', "*", ".css"],

        // 配置模块的查找路径

        modules: [libPath],     

        // 模块名称映射

        alias: pathMap

    }

}

上面的resolve.alias中，我们使用了pathmap.json导出的对象，当遇到import $ from ‘jquery’时会替换成import $ from 'jquery.min.js'

上面的resolve.modules我们配置了./src/lib，查找jquery.min.js时会进入./src/lib目录进行查找

 

3.在我们的js中引入jq库，然后我们便可在该js文件中使用jq

import $ from 'jquery';

 

4.在项目路径下，执行webpack 打包指令

 

注：如果你使用的React，那么我还是推荐不要使用jq了