[项目][准备5] Bootstrap&jQuery插件体验

学习目标

在准备5中，我们将在Webpack管理机制下，将jQuery全局化，并尝试使用Bootstrap和jQuery插件。

Bootstrap3自带插件共有12种，需要全局jQuery支持，实际上就是jQuery插件

这里只测试Bootstrap的modal插件，用于代表Bootstrap和jQuery插件

学习参考

下列链接建议详细学习：

• webpack多页应用架构系列(四):老式jQuery插件还不能丢，怎么兼容？

下列链接可以作为参考：

• Bootstrap 插件概览

已知的一个坑：

• 在准备4中介绍了开启源码映射的方法，即添加”devtool: ‘eval-source-map’”，需要注意的是，某些浏览器虽然也是Chrome内核，但是对这个东西支持貌似不都是那么友好
• 例如，在添加jQuery全局时，我默认开启源码映射，build后使用搜狗浏览器，浏览器控制台里面就会报错，去掉源码映射就一切正常
• 开启源码映射时，建议使用Google Chrome浏览器环境

浏览器控制台输出在哪里看：

• 准备4未说明，这里补充：打开浏览器，快捷键ctrl+shift+I打开开发者工具面板，Console选项卡就是控制台输出

实践示例

准备工作

• 参考准备3，clone或下载准备3整个项目，得到下方目录结构

目录结构

-prepare3
    -app
        -components
            Button.jsx
            ButtonContainer.jsx
            ResultShow.jsx
        -containers
            App.jsx
        index.js
    .gitignore
    package.json
    webpack.config.js

操作步骤

• 打开cmd，切换到prepare3目录

• 下载安装依赖，保持网络畅通，耐心等待完成

npm install

• 引入jQuery

npm install jquery --save

• 引入expose-loader

npm install expose-loader --save-dev

• 修改webpack.config.js文件，添加全局jQuery(具体解释参考第一个学习链接)

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, 'index.js')
  },

  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },

  //说明：按需要清除注释，应在Chrome浏览器环境下使用
  //devtool: 'eval-source-map',

  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
      },
      {
        test: /\.(png|woff|woff2|svg|ttf|eot)$/,
        loader:'url-loader?limit=10000'
      },

      //新添加：用于将jquery全局化
      {
        test: require.resolve('jquery'),
        loader: 'expose?$!expose?jQuery'
      }
    ]
  },

  resolve: {
      extensions: ['', '.js', '.jsx']
  },

  plugins: [
    new HtmlwebpackPlugin({
      title: '计算器'
    }),

    //新添加：用于在依赖jquery地方自动引入jquery
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
    })
  ]
};

• 修改index.js文件，在全局范围添加Bootstrap的modal插件

说明：modal插件无论在哪里require，效果都是全局的，具体解释参见第一个学习链接

require('../node_modules/bootstrap/dist/css/bootstrap.css');
require('../node_modules/bootstrap/js/modal.js');
var ReactDOM = require('react-dom');
var React = require('react');
var App = require('./containers/App');

var app  = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

• 在ResultShow.jsx文件中添加模态框相关代码

var React = require('react');

var ResultShow = React.createClass({
    propTypes: {
        showNumber: React.PropTypes.number.isRequired
    },  
    render: function () {
        return (
            <div className="row clearfix">
                <div className="col-xs-4 column col-xs-offset-8">
                    <center><h3>{this.props.showNumber}</h3></center>
                </div>

                <button className="btn btn-primary" data-toggle="modal" data-target="#myModal">模态框</button>
                <div className="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 className="modal-title"><center>这是一个标题</center></h4>
                            </div>
                            <div className="modal-body">
                                <center>这是一个模态框</center>
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" className="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

module.exports = ResultShow;

• 执行打包命令

npm run build

• 使用Chrome浏览器打开build目录下的index.html即可看到效果

后续操作

1. 强烈建议将react相关进行全局化，亲自体验一下
2. 强烈建议测试使用BootstrapValidator插件，亲自体验一下