#ReactApp项目构建流程【1】

小白的ReactApp项目构建流程【环境搭建与HelloWorld】

• 开发环境：win10
• 开发软件：webstorm

创建新项目（空文件夹）

• 当前目录下（以后以home表示）执行cmd

      webstorm上直接alt+F12即可弹出控制台

• $npm init

      项目初始化，文件夹下新增package.json文件

• $npm i webpack

  安装webpack

• $npm i react

  安装react

• $npm i react-dom -S

  其中 
  -S就是--save的简写，就行npm默认一个start的字段，你可以不必输入npm run start 而只需输入npm start，这两个效果是一样的。
  -D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，
  而--save会将包的名称及版本号放在dependencies里面。

• 在home下，新建build文件夹，同时内建webpack.config.js

  放置配置文件，webpack的config文件，以及一些脚本文件
  

• 在home下，新建client文件夹，同时内建app.js以及App.jsx

  放置客户端文件，app.js作为应用入口，App.jsx用于声明整个应用页面上的内容   

• 修改webpack.config.js以及package.json,给app.js添加测试代码

  [package.json]  
  ->start
  {
    "name": "react-learn",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
          "build":"webpack --config build/webpack.config.js"  
          //scripts-build：
           指定webpack的config文件，实际执行时需要删除此代码，否则会报错
           package.json mustbe actual JSON, not just JavaScript.因为json不识别注释
    },
    "author": "zc",
    "license": "ISC",
    "dependencies": {
      "react": "^16.2.0",
      "webpack": "^3.10.0"
    }
   }
  ->End
  
  
  [webpack.config.json] 
  ->start
  const path = require('path');
  module.exports = {
      entry: {                                     //资源文件的路径，打包时的入口
          app: path.join(__dirname,'../client/app.js')
      },
      output: {                                    //输出的目录
          filename: "[name].[hash].js",            //[]代表变量,hash用于刷新缓存
          path: path.join(__dirname,'../dist'),    //输出文件存放的路径
          publicPath: '/public'                    //静态资源文件引用的路径的前缀              --/public/app.hash.js,用于区分静态资源/API请求,还可以直接修改为cdn路径
      }
  }
  -> End
  
  [app.js]
  ->start
  alert(123);
  ->end
  

• $npm run build

  打包完成，文件结构内出现dist目录并且生成项目文件

• 编写App.jsx

  import  React from 'react'
    
  export default class App extends React.Component{
      render(){
          return(
              <div>Hello World </div>
          )
      }
  }
  //tips:
  1：如果未出现智能提示，
  Settings->Languages&Frameworks->Node.js and NPM->Coding Assistance->Enable 即可
  2：jsx内快速书写html标签：tab键

• $npm i react-dom -S

  用于将react组件渲染到dom中
  

• 修改app.js,用于将react组件渲染到dom中

  import ReactDOM from 'react-dom'
  import App from './App.jsx'
  ReactDOM.render(App,document.body)  
      //将App挂载在document.body中，因为此时并没有模板，只有body可以使用，官方推荐在body中创建一个默认 节点作为主dom

• 修改webpack.config.js

  与output同级添加webpack解析模块
  
  module: {                           //添加模块，让webpack识别jsx代码(非标准js语法)
      rules: [
          {
              test:/.jsx$/,           //正则表达式，react项目设置为所有的符合test正则的文件
              loader: 'babel-loader'  //识别符合test正则的文件的loader，babel是编译各种最新js语法的工具，react指定工具
          }
      ]
  }

• $npm i babel-loader -D

  开发的工具使用 -D加载提供给开发者的develope版本模块

• $npm i babel-core-D

   babel-loader只是webpack的插件，其核心还是babel-core，需要安装

• $npm run build

   此时运行会报错误，因为babel默认直接编译es6语法而不能支持jsx,需要配置babel编译模式->

• root目录下新建.babelrc文件并编辑

  {
   "presets": [  //代表babel支持的语法,因为语法太多，所以babel-core中并未包含es2015
           ["es2015",{"loose":true}],//松散类型，非严格类型
           "react"                   //babel只编译有react选项的代码
       ]
   }

• $npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D

• 删除老dist目录后 ->npm run build

  新生成的dist目录中的[name].[hash].js文件会非常大，因为react源码会被编译其中，
  其中最底下的代码就是开发者自己编写的代码

• $npm i html-webpack-plugin -D

  想要在浏览器中打开自己编译好的软件，需要安装此插件
  
  本人安装成了 webpack-html-plugin 233

• 引用html-webpack-plugin【最简单的引用方式】

  在webpack.config.js顶部添加代码
  
  const HTMLPlugin=require('html-webpack-plugin')
  
  同时添加与module同级的选项
  
  plugins:[
      new HTMLPlugin();//webpack编译时生成HTML页面，并且把所有的entry选项都注入到HTML页面中，
                          并且filename,path和publicPath都是基于output选项进行拼接而成
  ]

• $npm run build

  可以看到在dist目录中出现webpack编译成的HTML页面
  
  因为此时并未起服务器/路径映射,因此此时路径将会出现问题,无法访问资源文件
  
  删除dist目录,将webpack.config.js->output->publicPath置为空,使webpack使用绝对路径编译文件
  
  重新 build,用HTML进入编译好的HTML文件
  
  会发现仍然没有内容,F12发现报错
     --报错1:不能直接将react组件挂载在document.body上,但这并不是影响运行的错误
     --报错2:ReactDOM.render时,也需要用jsx语法编写
  
      其实,jsx文件使用的js语法是es6的语法,而在app.js中含有jsx代码,也就是说app.js代码中实际使用的是
  ES6+jsx代码,之前只是对jsx用babel编译成ES2015代码,而ES6文件并未做此处理,因此需要webpack.config.
  js->rules修改test,用于将ES6语法编译成ES2015,将现有的test /.jsx$/ -> /.(jsx|js)$/后,再执行
  [npm run build],此时会报错,原因是在[root -> node_modules]下的文件在npm init加载时已经经过编译,
  所以此文件夹下的js代码需要过滤,那么在rules中新添加test用于[过滤非node_modules]文件夹下的js文件
  

• 修改webpack.config.js->npm run build

   {
         test:/.js$/,
         loader: 'babel-loader',
         exclude:[
              path.join(__dirname,'../node_modules')
            ]
    }

• 打开HTML,报错,显示React未定义

  贴上错误代码
  _reactDom2.default.render(React.createElement(_App2.default, null), document.body);
  
  在app.js中,引入了jsx标签,必须要引入React,因为jsx代码最终翻译出来的标签都会用到React

• 在app.js中引入React

  import React require('react')

• $npm run build

  进入HTML,OJBK,顺利显示Hello World

小结:

后续再写