从零开始学习搭建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 相关文章推荐
setInterval计时器不准的问题解决方法
May 08 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
vue配置多代理服务接口地址操作
2020/09/08 Javascript
python实现redis三种cas事务操作
2017/12/19 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python图像处理入门(一)
2019/04/04 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
Python if else条件语句形式详解
2022/03/24 Python