从零开始学习搭建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 相关文章推荐
JS中获取数据库中的值的方法
Jul 14 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
js获取域名的方法
Jan 27 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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实现获取文章内容第一张图片的方法
2014/11/04 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
js切换div css注意的细节
2012/12/10 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jquery+php实现搜索框自动提示
2014/11/28 Javascript
初识Node.js
2015/03/20 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python爬取读者并制作成PDF
2015/03/10 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python 调用钉钉机器人的方法
2019/02/20 Python
详解Python 解压缩文件
2019/04/09 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
详解Python中的路径问题
2020/09/02 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
毕业自我鉴定
2013/11/05 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
司法所长先进事迹
2014/06/02 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers