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


Posted in Javascript onAugust 23, 2018

写在前面

准备学习一下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欢迎各位来串门哟!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Function.prototype.bind用法示例
Sep 16 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 #Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
JS实现的简单分页功能示例
Aug 23 #Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
You might like
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
微信小程序实现日历功能
2018/11/27 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Java 生成随机字符的示例代码
2021/01/13 Javascript
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python实现对输入的密文加密
2019/03/20 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python实现证件照换底功能
2019/08/20 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
村委会贫困证明
2014/01/14 职场文书
学籍证明模板
2014/11/21 职场文书
病房管理制度范本
2015/08/06 职场文书
担保书范文
2019/07/09 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
python 对图片进行简单的处理
2021/06/23 Python