webpack & react项目搭建一:环境
2016-09-09 00:28
986 查看
I. webpack & react项目搭建一:环境
字数1245 阅读1180 评论2 喜欢4见知乎文章
写在前面:使用的工具是iTerm命令行工具和Atom代码编辑器。
1. 项目效果
TBD
2. 创建项目并初始化
$ mkdir webpack-react-demo $ cd webpack-react-demo $ npm init $ touch .gitignore $ touch webpack.config.js
其中.gitignore用于说明代码提交时忽略的文件,可参考下面的常用配置
logs *.log .grunt node_modules bower_components build
3. 通过npm安装项目所需的依赖包
webpack相关包$ npm install webpack webpack-dev-server html-webpack-plugin --save-dev
css\scss样式文件,图片文件相关包
$ npm install css-loader style-loader sass-loader node-sass --save-dev $ npm install file-loader url-loader --save-dev
babel\react\es6支持包
$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev $ npm install jshint jshint-loader --save-dev $ npm install react react-dom --save $ npm install bootstrap@4.0.0-alpha.2 --save-dev
bootstrap\jquery\moment支持包
$ npm install bootstrap@4.0.0-alpha.2 --save-dev $ npm install jquery moment --save-dev
4. 创建工程结构,目录如下:
app/index.jsx (程序入口)
components/ (组件文件夹)
plist.jsx (展示用户列表)
search.jsx (搜索框组件)
utils/ (工具类)
templates (模版文件夹)
index.html
mobile.html
package.json (项目及npm包版本信息)
webpack.config.js (webpack配置文件)
5. 配置webpack
向webpack.config.js文件写入一下内容: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'); var TEM_PATH = path.resolve(ROOT_PATH, 'templates'); module.exports= { entry: { app: path.resolve(APP_PATH, 'index.jsx'), mobile: path.resolve(APP_PATH, 'mobile.jsx'), vendors: ['jquery', 'moment'] }, output: { path: BUILD_PATH, filename: '[name].js' }, resolve: { extensions: ['', '.js', '.jsx'] }, //启动dev source map,出错以后就会采用source-map的形式直接显示你出错代码的位置。 devtool: 'eval-source-map', //enable dev server devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, //只要配置dev server map这个参数就可以了 proxy:{ '/api/*':{ target: 'http://localhost:8080', secure: false } } }, //babel重要的loader在这里 module: { //loader前执行处理,这样每次npm run start的时候就可以看到jshint的提示信息 preLoaders: [ { test: /\.jsx?$/, include: APP_PATH, loader: "jshint-loader" } ], loaders: [ { test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { //添加两个presents 使用这两种presets处理js或者jsx文件 presets: ['es2015', 'react'] } }, { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ] }, //配置jshint的选项,支持es6的校验 // any jshint option http://www.jshint.com/docs/options/ jshint: { "esnext": true }, plugins: [ //这个使用uglifyJs压缩你的js代码 new webpack.optimize.UglifyJsPlugin({minimize: true}), new HtmlwebpackPlugin({ title: 'My first react app', template: path.resolve(TEM_PATH, 'index.html'), filename: 'index.html', chunks: ['app', 'vendors'], inject: 'body' }), new HtmlwebpackPlugin({ title: 'Hello Mobile app', template: path.resolve(TEM_PATH, 'mobile.html'), filename: 'mobile.html' }), //把入口文件里面的数组打包成verdors.js new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js') ] }
6.npm中添加webpack启动命令
在package.json文件中添加:... "scripts": { "dev": "webpack-dev-server --progress --profile --colors --hot --inline", "build": "webpack --progress --profile --colors", "test": "test", }, ...
分享下我通过npm安装的包版本信息
... "devDependencies": { "babel-core": "^6.4.5", "babel-loader": "^6.2.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "bootstrap": "^4.0.0-alpha.2", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.7.2", "jquery": "^2.2.0", "jshint": "^2.9.1", "jshint-loader": "^0.8.3", "moment": "^2.11.1", "node-sass": "^3.4.2", "sass-loader": "^3.1.2", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.12.12", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react": "^0.14.6", "react-dom": "^0.14.6" } ...
7. 添加首页
7.1 写入index.jsx
import '../node_modules/bootstrap/scss/bootstrap.scss'; import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; class App extends React.Component{ constructor() { super(); } render() { //JSX here! return ( <div className="container"> <section className="jumbotron"> <h3 className="jumbotron-heading">Search Github Users</h3> </section> </div> ) } }; const app = document.createElement('div'); $('body').append(app); ReactDOM.render(<App />, app);
7.2 运行webpack查看效果
npm run dev如下所示说明Babel和Bootstrap正确使用了。
首页
4. 添加React Transform支持,实现热加载
隆重推出Babel-plugin-react-transform 名字挺长, 看起来挺吓人,其实你就可以想象用这个东西可以实时的对你的ReactComponent做各种处理,它是基于Babel Plugin。
这是个基本的架子,可以通过它完成各种transform,如果想实现Hot Module Replacement (说白了就是页面不刷新,直接替换修改的Component),再安装react-transform-hmr。再来一个在页面上直接显示catch到的错误的transform。要让新建的两个transform生效,只需再安装一个present。
安装
npm install babel-plugin-react-transform --save-dev` npm install react-transform-hmr --save-dev npm install --save-dev react-transform-catch-errors redbox-react npm install babel-preset-react-hmre --save-dev
将支持HMR和Catch Error的present添加到.babelrc
{ //添加两个presents 使用这两种presets处理js或者jsx文件 presets: ['es2015', 'react'], //在开发的时候才启用HMR和Catch Error "env": { "development": { "presets": ["react-hmre"] } } }
启动
npm run dev,修改h3的颜色,可以看到效果如下
相关文章推荐
- nodejs - webpack - ReactJS - AntDesign 项目搭建环境并运用到thinkphp5框架代码中
- websorm环境下,react+webpack搭建项目环境
- 基于React+webpack的项目环境搭建
- Webpack+Babel+React开发环境搭建
- React+Webpack+Babel开发环境的搭建
- react+webpack+babel环境搭建
- 使用yeoman快速搭建react-webpack开发环境
- 使用webpack && react环境
- 详解基于webpack搭建react运行环境
- 自己动手搭建React开发环境之三Webpack
- react+es6+webpack环境搭建以及项目入门
- 详解 Webpack+Babel+React 开发环境的搭建
- 从零开始,搭建基于webpack的react开发环境
- express+webpack+react搭建项目
- 使用webpack和babel搭建react开发环境
- 试着用React写项目-利用Webpack搭环境
- React+webpack开发环境的搭建_0
- 搭建Amazeui+react+webpack+webstorm开发环境
- React+Webpack+babel开发环境搭建
- 使用webpack和babel搭建react开发环境