从零开始学习搭建React脚手架项目

289 阅读 0 评论 191 点赞

我是靠谱客的博主从容小松鼠，最近开发中收集的这篇文章主要介绍从零开始学习搭建React脚手架项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

写在前面

准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多

react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。

脚手架下载

使用npm下载create-react-app运行如下命令：

npm install -g create-react-app

国内npm一般下载比较慢或者是常出现下载失败的情况，我们可以指定下载的仓库：

npm install -g create-react-app --registry https://registry.npm.taobao.org

或者直接设置npm的默认仓库：

npm config set registry https://registry.npm.taobao.org

第一步，依赖总览

完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了babel,less,antd按需加载的地步。总体的package.json情况如下：

    {
      "name": "myreact",
      "version": "1.0.0",
      "description": "test react",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
      },
      "keywords": [
        "test",
        "react"
      ],
      "author": "xxxx",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^9.1.2",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-import": "^1.8.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.8.1",
        "less-loader": "^4.1.0",
        "postcss-import": "^12.0.0",
        "postcss-loader": "^3.0.0",
        "react-hot-loader": "^4.3.4",
        "style-loader": "^0.22.1",
        "webpack": "^4.16.5",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.5"
      },
      "dependencies": {
        "antd": "^3.8.2",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-router-dom": "^4.3.1"
      }
    }

暂时做到这些依赖，需要指出的是，webpack4和以前的版本可能有差别（不一定，或许是我没有注意到）如果需要在scrpit属性中配置，使用cli的方式运行，就需要安装webpack-cli，需要行内命令行的方式运行，就需要安装webpack-command,当然，一起安装应该也没有什么问题。这里是和教程里面配置的不一样的地方。

然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development这个参数。这也是教程中没有提到的部分。

关于babel配置

babel的相关依赖，有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,这个是babel的相关依赖，等等，有人可能会看到babel-plugin-import没有提到，这个模块的用途是为了antd的按需加载的。可以看看详细的babelrc文件：

{
  "presets": [
   "es2015",
   "react",
   "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
   ]
 }

以上是babel的配置，preset的值就是那三个模块，至于作用，es2015是为了处理es6语法的，react是为了处理jsx语法的，stage-0是为了支持新特性的。

至于插件的配置，react-hot-loader/babel是为了热更新，不丢失状态，这点教程中已经说到了。下边的import这个，就是上边提到的babel-plugin-import的配置，也是antd的按需加载，官方推荐的配置。

还需要提到一点，这里可能一些新特性还是支持不够，比如async/await语法，可能需要再安装babel-plugin-transform-runtime这个模块，babelrc文件的plugins还需要配置"transform-runtime"这个插件进去，以支持新特性。

依赖相关的就说到这里。

webpack的配置

我这边直接在根目录下的config目录创建了webpack.dev.config.js,具体的配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 
  /*入口*/
  entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
  
  /*输出到dist文件夹，输出文件名字为bundle.js*/
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    historyApiFallback: true
  },
  module: {
    rules: [{
      test: /.js[x]?$/,
      use: ['babel-loader?cacheDirectory=true'],
      include: path.join(__dirname, '../src')
    },{
      test: /.css$/,
      use: ['style-loader','css-loader','postcss-loader'],
      
    },
    {
      test: /.less$/,
      use:[ 'style-loader',
        {loader: 'css-loader',options:{importLoaders:1}}, 
       'less-loader'],
      
    }]
  },
  plugins:[new HtmlWebpackPlugin({
    title:'react测试',
    template:'./src/index.html',
    filename:'./dist/index.html'
  })],
  devtool: 'inline-source-map',
  resolve:{
    alias: {
      "@":path.join(__dirname, '../src/')
    }
  }

};

这边的配置就没啥说的，基本上loader的配置，目前完成js(x)的处理，css/less的处理，和其他的常规cli配置，少了url-loader,file-loader，代码分割这些功能。

完结

差不多配置就是这样，很简陋，功能也不齐全，需要完成的工作还有很多。不过自己动手，丰衣足食……

项目的github地址 diy-react-cli欢迎各位来串门哟！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。