学习目标
在准备5中,我们将在Webpack管理机制下,将jQuery全局化,并尝试使用Bootstrap和jQuery插件。
Bootstrap3自带插件共有12种,需要全局jQuery支持,实际上就是jQuery插件
这里只测试Bootstrap的modal插件,用于代表Bootstrap和jQuery插件
学习参考
下列链接建议详细学习:
下列链接可以作为参考:
已知的一个坑:
- 在准备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">×</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即可看到效果
后续操作
- 强烈建议将react相关进行全局化,亲自体验一下
- 强烈建议测试使用BootstrapValidator插件,亲自体验一下