小白的ReactApp项目构建流程【环境搭建与HelloWorld】
- 开发环境：win10
- 开发软件：webstorm
创建新项目（空文件夹）
-
当前目录下（以后以
home表示）执行cmdwebstorm上直接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-Dbabel-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中引入Reactimport React require('react') -
$npm run build进入HTML,OJBK,顺利显示Hello World
小结:
后续再写
