Webpack引入jquery及其插件的几种方法

时间：2024-03-03 13:42:56

http://blog.csdn.net/yiifaa/article/details/51916560

 

. 直接引入[最佳方案]

直接引入的关键在于输出的配置，这里以var为例，如下：

 output : {
      filename : \'[name].js\',
       //  devServer不可配置为绝对路径
       //publicPath: "http://localhost:8080/dist/",
       publicPath: "/dist/",
       path : build,
       //  umd包含了对amd、commonjs、var等多种规范的支持
       //   关键在于这里  
       libraryTarget : \'var\'  
   },  
//  其他配置略
 resolve: {
        //extensions: [\'\', \'.js\', \'.es6\', \'.vue\'],
        alias: {
            //  也可以不写
            jquery: \'jquery/dist/jquery.min.js\',  
        }
}

这样，在编译代码时，webpack会自动将jQuery打进代码，现在就可以引入代码了

// 可以直接引入jquery
import $ from \'jquery\'
// 因为是commonjs规范，所以会按顺序加载，引用成功，如果是output为amd，则必须在requirejs中配置shim，否则失败
import \'jquery-ui\'

2. ProvidePlugin[难以引入插件]

在webpack中添加插件ProvidePlugin

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
  ]
//  $函数会自动添加到当前模块的上下文，无需显示声明
问题是依旧没有全局的$函数，所以导入插件依旧会失败，并且如果有eslint这样的preLoads，调用语句也难以通过语法校验(因为没有声明$就直接使用)，仅这一点，对于我这样的代码处女座就难以接受。

3. expose-loader[推荐使用]

不需要任何其他的插件配合，只要将下面的代码添加到所有的loader之前

 {
    test: require.resolve(\'jquery\'),
    loader: \'expose?jQuery!expose?$\'
 }
引用时改为如下方式

import $ from \'expose?$!jquery\'
import \'jquery-ui\' //插件可用   
 imports-loader、script-loader同样可达到此效果，配置与功能都非常相似，在此不一一说明。

4. 包装jquery[推荐使用]

此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.js

import $ from \'jquery\'
window.$ = $
window.jQuery = $
export default $
以后引用jquery时指向jquery-vendor.js

import $ from \'../assets/jquery-vendor.js\'
import \'jquery-ui\'
//  此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法

 

为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名


alias: {
    jquery        : \'src/assets/jquery-vendor.js\' //    将其指向jquery-vendor.js所在位置
}

可参考我的项目中的配置文件。

相关文章