搭建react项目

依附网站：https://github.com/theJian/build-a-hn-front-page
第一步：初始化项目 npm init
安装 webpack

npm install --save-dev webpack@3

Q: 什么时候用--save-dev，什么时候用--save？

A: --save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。看这里

第二步：然后在项目的根目录下建一个名为webpack.dev.config.js（webpack开发配置文件）

const path = require('path');
module.exports = {
    /*入口*/
    entry: path.join(__dirname, 'src/index.js'),
    /*输出到dist文件夹，输出文件名字为bundle.js*/
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

然后在项目根目录新建一个src文件夹，建立一个index.js 并写入
document.getElementById('app').innerHTML = "Webpack works"，然后再运行命令 webpack --config webpack.dev.config.js
我们可以看到生成了dist文件夹和bundle.js
第三步：在dist文件夹下面新建一个index.html 在里面写入



  
      
      Document

然后再直接点击index.html 就可以看到

index.html

把入口文件 index.js 经过处理之后，生成 bundle.js。就这么简单。

babel

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。这一过程叫做“源码到源码”编译，也被称为转换编译。

通俗的说，就是我们可以用ES6, ES7等来编写代码，Babel会把他们统统转为ES5。

babel-core 调用Babel的API进行转码

babel-loader

babel-preset-es2015 用于解析 ES6

babel-preset-react 用于解析 JSX

babel-preset-stage-0 用于解析 ES7 提案

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
新建babel配置文件.babelrc，并且在里面写入

 {
   "presets": [
     "es2015",
     "react",
     "stage-0"
   ],
   "plugins": []
 }

然后修改webpack.dev.config.js，增加babel-loader！

 /*src文件夹下面的以.js结尾的文件，要使用babel解析*/
 /*cacheDirectory是用来缓存编译结果，下次编译加速*/
 module: {
     rules: [{
         test: /\.js$/,
         use: ['babel-loader?cacheDirectory=true'],
         include: path.join(__dirname, 'src')
     }]
 }

现在可以简单的做一个测试，看是否能够将es6的写法转成es5，修改src/index.js

 var func = str => {
     document.getElementById('app').innerHTML = str;
 };
 func('我现在在使用Babel!');

此时别忘记了再实行一个打包命令 webpack --config webpack.dev.config.js
然后会报错

image.png

原因竟然是因为babel-loader的版本过高，退回低版本就行了

npm uninstall babel-loader
npm install [email protected]

然而在查看bundle.js里面去看，并没看到转换的语法.......

react

npm install --save react react-dom
修改 src/index.js 使用react

import React, {Component} from 'react';

export default class Hello extends Component {
    render() {
        return (
            
                Hello,React!
            
        )
    }
}

然后再执行一遍打包命令 webpack --config webpack.dev.config.js
按照React语法，写一个Hello组件

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class Hello extends Component{
    render(){
        return(
            
                Hello,React!!!!!!!!!!!
            
        )
    }
}
ReactDom.render(, document.getElementById('app'));

命令优化

每次打包都得在根目录执行这么一长串的命令，直接修改package.json里面的script，增加dev-build

react-router

npm install --save react-router-dom
然后在src文件夹下新建两个组件 Home和Page 写入最基本的内容，让其有内容可以显示在页面

image.png

在router.js引入这两个组件

import React from 'react';
import {
        BrowserRouter as
        Router,
        Route,
        Switch,
        Link
} from 'react-router-dom';
import Home from '../pages/Home';
import Page from '../pages/Page';
const router=()=>(
    
        
            
                首页
                首页
            
        
            
            
        
        
    
);
export default router;

然后在src/index.js中

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import router from './router/router'
ReactDom.render(router(), document.getElementById('app'));

在原网站中会出现点击首页和page没有反应，但是我在使用webstorm的情况下没有遇见，暂时自己还不知道是什么问题。只能跳过！！！！
可能在打包的时候遇到这个问题

image.png

直接运行 webpack-cli即可

webpack-dev-server

简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。
npm install webpack-dev-server@2 --save-dev

补充：这里webpack-dev-server需要全局安装，要不后面用的时候要写相对路径。需要再执行这个 npm install webpack-dev-server@2 -g

修改webpack.dev.config.js，增加webpack-dev-server的配置

devServer: {
        contentBase: path.join(__dirname, './dist')
    }

现在执行webpack-dev-server --config webpack.dev.config.js
在这里不知道为什么又遇到了一个未知的困难

image.png

自行在网上百度看到了有人说有可能是因为webpack和webpack-dev-server的版本不兼容的问题
然后我拷贝了之后项目中webpack和webpack-dev-server的版本就可以了

"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"

直接打开浏览器访问localhost:8080即可
Q: --content-base是什么？
A：URL的根目录。如果不设定的话，默认指向项目根目录。
到这里我们也可以在package.json里面设定，直接跑npm start就可以了，不用每次都写webpack-dev-server --config webpack.dev.config.js

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev-build": "webpack --config webpack.dev.config.js",
    "start": "webpack-dev-server --config webpack.dev.config.js"
  }

然后还有其他的webpack-dev-server的配置项

1.color（CLI only） console中打印彩色日志
2.historyApiFallback 任意的404响应都被替代为index.html。有什么用呢？你现在运行npm start，然后打开浏览器，访问http://localhost:8080,然后点击Page1到链接http://localhost:8080/page1，然后刷新页面试试。是不是发现刷新后404了。为什么？dist文件夹里面并没有page1.html,当然会404了，所以我们需要配置
historyApiFallback，让所有的404定位到index.html。
3.host 指定一个host,默认是localhost。如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。hot 启用Webpack的模块热替换特性。关于热模块替换，我下一小节专门讲解一下。
4.port 配置要监听的端口。默认就是我们现在使用的8080端口。
5.proxy 代理。比如在 localhost:3000 上有后端服务的话，你可以这样启用代理：

proxy: {
      "/api": "http://localhost:3000"
    }

模块热替换（Hot Module Replacement）

只更新改变的那一块，并且整个页面处于不刷新的状态
在package.json的start写入"start": "webpack-dev-server --config webpack.dev.config.js --hot" 尾部追加一个--hot
然后在src/index.js写入

if (module.hot) {
    module.hot.accept();
}

搭建react项目

babel

react

命令优化

react-router

webpack-dev-server

模块热替换（Hot Module Replacement）

你可能感兴趣的:(搭建react项目)