从零开始学习搭建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 相关文章推荐
Expandable "Detail" Table Rows
Aug 29 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
详解vue项目打包步骤
Mar 29 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你的验证码安全码?
2007/01/02 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Python 流程控制实例代码
2009/09/25 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
化工专业应届生求职信
2013/11/08 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
股东授权委托书范文
2014/09/13 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
银行授权委托书样本
2014/10/13 职场文书
毕业赠语大全
2015/06/23 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS