搭建react的架手架

时间 2019-11-25

标签搭建 react 栏目 React 繁體版

原文原文链接

一、回顾

cnpm i @vue/cli -g ----- 4的脚手架 ------ webpack 4css

cnpm i @vue/cli@3 -g ----- 3的脚手架 ------ webpack 4html

vue create myappvue

cnpm i vue-cli -g ----- 2的脚手架 ------ webapck 3node

vue init webpack myappreact

cnpm i @vue/cli-init -g ------ 三、4 兼容 2的写法

vue init webpack myappwebpack

17年使用vue-cli 2的脚手架，用的是webpack3，命令为vue init webpack myappios

18年使用@vue/cli 3的脚手架，用的是webpack4，命令为vue create myappes6

新的脚手架兼容旧的版本建立项目，使用模块 @vue/cli-initweb

2 和 3 的区别能够说是 webpack 3和 webpack4的区别vue-cli

webpack4 免配但可配，webpack3 必配

vue的脚手架基于 webpack4 免配的

react的脚手架基于 webpack4 配置的

二、webpack的配置 --- webpack 3

基于node，模块化、组件化开发的利器，配置名称为 webpack.config.js

webpack起初是facebook专门为react而量身打造的，后开源，其余语言也在用

2.1 建立文件 webpack.config.js

module.exports = {
}

2.2 建立入口文件 src/main.js

console.log('hello webpack')

2.3 配置文件配置入口

module.exports = {
  // entry: './src/main.js' // string类型写法
  entry: { // object 类型写法 ---- 推荐写法
    app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
  }
}

2.4 配置文件配置输出

module.exports = {
  // entry: './src/main.js' // string类型写法
  entry: { // object 类型写法 ---- 推荐写法
    app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
  },
  // +++++++++++++++++++++++++++++++++++++++++++
  output: { // 输出配置 ----- dist/app.js
    path: __dirname + '/dist', // 项目打包在dist目录下
    filename: '[name].js' // [name] 表示变量，若是入口肯定名字app，输出就是app.js
  }
}

2.5 安装依赖，测试此项配置

cnpm i webpack@3 -g

命令行输入 webpack 指令便可打包, dist/app.js出现

2.6 建立页面index.html，引入导出的js文件，查看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<!-- ++++++++++++++++++++++++++ -->
<script src="dist/app.js"></script>
</html>

2.7 配置自动导入js文件，相似vue

删除 index.html 中导入js文件
给webpack的配置添加插件，使用插件导入js

module.exports = {
  // entry: './src/main.js' // string类型写法
  entry: { // object 类型写法 ---- 推荐写法
    app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
  },
  output: { // 输出配置 ----- dist/app.js
    path: __dirname + '/dist', // 项目打包在dist目录下
    filename: '[name].js' // [name] 表示变量，若是入口肯定名字app，输出就是app.js
  },
  // ++++++++++++++++++
  plugins: [ // 添加插件 ---- 数组

  ]
}

cnpm i webpack@3 -D 基础模块 ---- 必须安装
cnpm i html-webpack-plugin -D

const webpack = require('webpack'); // ++++++++++++++++
const HtmlWebPackPlugin = require('html-webpack-plugin');// ++++++++++++++++
module.exports = {
  // entry: './src/main.js' // string类型写法
  entry: { // object 类型写法 ---- 推荐写法
    app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
  },
  output: { // 输出配置 ----- dist/app.js
    path: __dirname + '/dist', // 项目打包在dist目录下
    filename: '[name].js' // [name] 表示变量，若是入口肯定名字app，输出就是app.js
  },
  plugins: [ // 添加插件 ---- 数组
    // ++++++++++++++++++++++++++
    new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
      template: 'index.html' // 找的就是当前文件夹下的index.html文件
    })
  ]
}

从新执行webpack指令，发现dist文件夹下生成一个index.html文件，而且自动引入了生成的js文件

2.8 打包项目前先压缩js文件 - 插件

复制页面引入js前添加压缩js插件

plugins: [ // 添加插件 ---- 数组
    // ++++++++++++++  无需安装额外模块，基于webpack的基础模块
    new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
    new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
      template: 'index.html' // 找的就是当前文件夹下的index.html文件
    })
  ]

控制台运行webpack，从新打包查看app.js已为压缩过的js文件

三、js文件中引入css文件 ---- css文件做为模块使用

3.1 建立src/main.css

html {
  background-color: #f66;
}

3.2 src/main.js处引入css文件

import './main.css'; // +++++++++++++++++++
console.log('hello webpack')

运行命令webpack，发现如下错误,须要安装合适解析器去解析css模块语法

ERROR in ./src/main.css
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.

3.3 配置webpack的解析器

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
  // entry: './src/main.js' // string类型写法
  entry: { // object 类型写法 ---- 推荐写法
    app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
  },
  output: { // 输出配置 ----- dist/app.js
    path: __dirname + '/dist', // 项目打包在dist目录下
    filename: '[name].js' // [name] 表示变量，若是入口肯定名字app，输出就是app.js
  },
  plugins: [ // 添加插件 ---- 数组
    new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
    new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
      template: 'index.html' // 找的就是当前文件夹下的index.html文件
    })
  ],
  // +++++++++++++++++++
  module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则

    ]
  }
}

3.4 安装css模块的解析器

cnpm i style-loader css-loader@0 -D

3.5 配置css的解析器

module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则
      {
        test: /\.css$/, // 处理的是以css为结尾的css模块
        loader: 'style-loader!css-loader' // 从右到左解析，将css文件由css-laoder转换成样式表，将样式表由style-loader添加到dist/index.html内，在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
      }
    ]
  }

四、scss模块解析器配置

cnpm i node-sass sass-loader@7 -D

建立src/main.scss文件

html {
  background: #00f;
}

src/main.js引入scss文件

import './main.scss';
console.log('hello webpack')

报错同上
添加scss配置信息

module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则
      {
        test: /\.css$/, // 处理的是以css为结尾的css模块
        loader: 'style-loader!css-loader' // 从右到左解析，将css文件由css-laoder转换成样式表，将样式表由style-loader添加到dist/index.html内，在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
      },
      // +++++++++++++++++++++
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }

运行webpack,浏览页面，发现为蓝色，代表scss配置成功

五、less模块解析器配置

cnpm i less less-loader -D

建立src/main.less文件

html {
  background: #0f0;
}

src/main.js引入less文件

import './main.less';
console.log('hello webpack')

报错同上
添加scss配置信息

module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则
      {
        test: /\.css$/, // 处理的是以css为结尾的css模块
        loader: 'style-loader!css-loader' // 从右到左解析，将css文件由css-laoder转换成样式表，将样式表由style-loader添加到dist/index.html内，在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      // +++++++++++++++++++
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }
    ]
  }

运行webpack,浏览页面，发现为绿色，代表less配置成功

六、stylus模块解析器配置

cnpm i stylus stylus-loader -D

建立src/main.stylus文件

html{
  background: #000;
}

src/main.js引入stylus文件

import './main.stylus';
console.log('hello webpack')

报错同上
添加stylus配置信息

module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则
      {
        test: /\.css$/, // 处理的是以css为结尾的css模块
        loader: 'style-loader!css-loader' // 从右到左解析，将css文件由css-laoder转换成样式表，将样式表由style-loader添加到dist/index.html内，在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      // +++++++++++++++++++
      {
        test: /\.stylus$/,
        loader: 'style-loader!css-loader!stylus-loader'
      }
    ]
  }

运行webpack,浏览页面，发现为黑色，代表stylus配置成功

七、配置js的解析器

其实最重要的就是解析js的高级语法，让他能够在浏览器中访问

cnpm i babel-core@6 babel-loader@7 -D

若是要使用js最新的语法，那么须要安装相应的模块而且配置

env 包含了 es2015 以及 es7.....

cnpm i babel-preset-es2015 babel-preset-env -D

若是须要作react应用，还需安装模块

cnpm i babel-preset-react -D

根目录下建立文件 .babelrc, 文件能够省，可是配置不能省，省是配置到了webpack的配置文件

{
  "presets": ["es2015", "env", "react"]
}

添加js的解析器

module: { // 各种解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
    rules: [ // 解析器规则
      {
        test: /\.css$/, // 处理的是以css为结尾的css模块
        loader: 'style-loader!css-loader' // 从右到左解析，将css文件由css-laoder转换成样式表，将样式表由style-loader添加到dist/index.html内，在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.stylus$/,
        loader: 'style-loader!css-loader!stylus-loader'
      },
      // +++++++++++++++++++++++++++++++
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }

八、媒体文件、字体文件、背景图片解析器的配置

cnpm / npm i file-loader url-loader -D

添加相关配置信息

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static','img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static', 'media/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]')
  }
}

九、webpack开发服务器

vue 项目中 npm run serve 启动开发者服务器
webpack 能够配置开发者服务器

cnpm i webpack-dev-server@2 -g

cnpm i webpack-dev-server@2 -D

控制台运行 webpack-dev-server 指令，查看效果

修改代码继续查看效果，发现代码会自动更新

十、配置开发者服务器

10.1 数据请求

cnpm i axios -S

src/main.js 处请求数据，遇到跨域问题

import './main.css';
import axios from 'axios';
console.log('hello webpack! 开发者服务器')
axios.get('http://47.92.152.70/pro').then(res => {
  console.log(res.data)
})

添加webpack的配置选项 devServer

devServer: { // 开发者服务器配置
    host: '0.0.0.0', // 默认值是127.0.0.1,改成0.0.0.0以后局域网内能够经过ip地址访问
    port: 8080, // 默认访问服务器的端口号
    // open: true, // 打开默认浏览器，通常设置为false
    proxy: { // 解决跨域问题
      '/api': {
        target: 'http://47.92.152.70', // 代理哪个服务器
        changeOrigin: true, // 代理
        pathRewrite: {
          '^/api': '' // 以 /api 开头的请求，认为就是请求的代理
          // /api/pro   ===> http://47.92.152.70/pro
        }
      }
    }
  }

修改请求代码,查看效果

axios.get('/api/pro').then(res => {
  console.log(res.data)
})

十一、添加服务器的启动命令

package.json文件中添加scripts选项

"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
},

十二、配置@符号

resolve: {
  extensions: ['.js', '.vue', '.jsx'], // 表明缺省的后缀名，引入时能够省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';
  alias: { // 别名
    '@': path.join(__dirname, './', 'src') // src 的别名为 @
  }
}

1三、webpack + vue

webpack配置别名

resolve: {
    extensions: ['.js', '.vue', '.jsx'], // 表明缺省的后缀名，引入时能够省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';
    alias: { // 别名
      '@': path.join(__dirname, './', 'src'), // src 的别名为 @
      // +++++++++++++++++++++++++++
      'vue$': 'vue/dist/vue.esm.js' // 打包vue项目必须得写的别名
    }
  }

安装vue的依赖

cnpm i vue -S

cnpm i vue-loader@14 vue-template-compiler -D

配置vue文件的解析器

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

剩下的就是普通的vue的项目开发

1四、初体验react

cnpm i react react-dom -S

1五、复习es6的语法

15.1 es6 class

补充webpack配置

经过运行不一样的命令，表示不一样的环境

cnpm i cross-env -D

修改packages.json

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

修改webpack.config.js

const isDev = process.env.NODE_ENV =='development'
plugins: [ // 添加插件 ---- 数组
  new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
  new webpack.DefinePlugin({ // ++++++++++++++
    'process.env':{
      NODE_ENV:isDev?'"development"':'"production"',
    }
  }),
  new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
    template: 'index.html' // 找的就是当前文件夹下的index.html文件
  })
],