Wed, Sep 16 2015, 9:47:00 am

webpack jquery + jquery-ui

参考文章:

http://webpack.github.io/docs/usage-with-bower.html

https://github.com/webpack/webpack-with-common-libs

基于项目：

https://github.com/MarshalW/react-proto/tree/m5.4

改项目中要用到jquery + jquery-ui，以前的方式是

1.使用bower install安装所需的库，主要是jQuery和jQuery UI

2.将jQuery UI等库全局的方式加入到html页面上，类似这样：

<head>
  <title>react原型</title>
  <!-- jquery -->
  <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
  <!-- jquery-ui -->
  <script type="text/javascript" src="/bower_components/jquery-ui/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
  <!-- bootstrap -->
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
  <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>    
</head>

缺点是，hot-load方式调试的时候，每做一次改动，浏览器重新加载的速度较慢，要好几秒钟

webpack提供了使用bower的方式：

webpack.config.js 加入如下配置：

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './scripts/index'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],
  resolve: {
     extensions: ['', '.js', '.jsx'],
      root: [path.join(__dirname, "bower_components")],
    alias: {
        "jquery": "jquery",
        "jquery-ui": "jquery-ui/jquery-ui.js",

    }
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel'],
        include: path.join(__dirname, 'scripts')
      },
      {
        test:/\.css$/,
        loader:'style!css'
      }
      // TODO 加入正确的css loader配置
    ]
  }
};

让webpack查找bower_components folder

 resolve: {
   root: [path.join(__dirname, "bower_components")]
},

让webpack使用bower.json中的main字段

plugins: [
```
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    )
]
```
tips：不过这个文档中说，优先通过npm安装所需要的库

Prefer modules from npm over bower
In many cases modules from npm are better than the same module from bower. Bower mostly contain only concatenated/bundled files which are:

1.More difficult to handle for webpack

2.More difficult to optimize for webpack

3.Sometimes only useable without a module system

4.So prefer to use the CommonJs-style module and let webpack build it.

全局声明jQuery，这样可以在项目中直接用$或者jQuery

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

给JQuery-ui起别名：

alias: {
         "jquery": "jquery",
         "jquery-ui": "jquery-ui/jquery-ui.js",

}

这里需要注意的地方是jquery-ui/jquery-ui.js，需要指定到具体要执行的某个文件。

以上是webpack的配置文件，项目中的某个js文件要用到jquery-ui，可以这样子写：

import 'jquery-ui';   //引入jquery-ui

$('#canvas').draggable();   //使某个元素可以拖动

以上就是webpack中使用jQuery+jQuery-ui的方法.

补充：

上面的方式只是加载js文件，所需要的样式还是需要手动去加载下的

例如：

require("jquery-ui/themes/base/jquery-ui.css");

加载相应的css文件。

这里还有一个问题，因为这些样式里面有图片，需要一个图片加载模块来实现

https://www.npmjs.com/package/image-webpack-loader

这里我用的是image-webpack-loader这个模块。

loaders: [
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
]

然后再编译下，访问页面，就会在页面上看到样式。

Prefer modules from npm over bower

Comments