从零开始学习搭建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 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript 数组操作详解
Jan 29 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 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
谈一谈收音机的高放电路
2021/03/02 无线电
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python如何随机生成高强度密码
2020/08/19 Python
Python中pass的作用与使用教程
2020/11/13 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
实习单位接收函模板
2014/01/10 职场文书
高中军训感言1000字
2014/03/01 职场文书
产品生产计划书
2014/05/07 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
房地产项目合作意向书
2015/05/08 职场文书