从零开始学习搭建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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
document.write的几点使用心得
May 14 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
webpack css加载和图片加载的方法示例
Sep 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
pow在python中的含义及用法
2019/07/11 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python-视频分帧&多帧合成视频实例
2019/12/10 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python求前n个阶乘的和实例
2020/04/02 Python
python中的时区问题
2021/01/14 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
奥巴马演讲稿
2014/01/08 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
爱情检讨书大全
2014/01/21 职场文书
民政局个人整改措施
2014/09/24 职场文书
教师个人年度总结
2015/02/11 职场文书
实施意见格式范本
2015/06/05 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android