从零开始搭建Webpack+react框架
1.下载node.js
Node.js官网下载 , 安装;
安装成功后在控制台输入node -v 可查看当前版本:
$ node -v
v10.15.0
输入npm -v查看npm版本:
$ npm -v
6.4.
2.创建项目
1.安装各种需要的依赖:
npm install --save react
- 安装React.npm install --save react-dom
安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话,这里就是安装react-native。npm install --save-dev webpack
- 安装Webpack, 模块打包工具.npm install --save-dev webpack-dev-server
- webpack官网出的一个小型express服务器,主要特性是支持热加载.npm install --save-dev babel-core
- 安装Babel, 可以把ES6转换为ES5,注意Babel最新的V6版本分为babel-cli和babel-core两个模块,这里只需要用babel-core即可。npm install --save babel-polyfill
- Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environmentnpm install --save-dev babel-loader
- webpack中需要用到的loader.npm install --save babel-runtime
- Babel transform runtime 插件的依赖.npm install --save-dev babel-plugin-transform-runtime
- Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.npm install --save-dev babel-preset-es2015
- Babel preset for all es2015 plugins.npm install --save-dev babel-preset-react
- 用于将 JSX 和其他东西编译到 JavaScriptnpm install --save-dev babel-preset-stage-2
- All you need to use stage 2 (and greater) plugins (experimental javascript).
2.打开 package.json
然后添加下面的scripts:
"scripts": {
"start": "webpack-dev-server --hot --inline --colors --content-base ./build",
"build": "webpack --progress --colors"
}
为项目创建一个目录: mkdir webpack-react-tutorial && cd webpack-react-tutorial
创建一个用于保存代码的最小目录结构:mkdir -p src
通过运行来启用项目:npm init -y
到此项目建立完成!
懒得码字 本段来源作者:瘦人假噜噜
链接:https://www.jianshu.com/p/324fd1c124ad
从零开始搭建Webpack+react框架的更多相关文章
- 搭建 webpack + react 框架爬坑之路
由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 一分钟搭建Webpack+react+es6框架
最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话. 直接进入正题: 打开命令行工具: npm install - ...
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 从零开始搭建属于你的React/redux/webpack脚手架
大家好,我是苏南,今天要给大家分享的是<<我的react入门到放弃之路>>,当然,也不是真的放弃啦--哈哈,这篇博客原本是从17年初写的,一直没有在csdn发布,希望今天不会太 ...
随机推荐
- 2018-2019-2 20165215《网络对抗技术》Exp5 MSF基础应用
目录 实验内容 实验原理 实验步骤 (一)一个主动攻击实践 ms08_067(成功) (二)一个针对浏览器的攻击 ms14_064(成功) (三)一个针对客户端的攻击 Adobe(成功) CVE-20 ...
- css3 box-flex
应用地址:http://www.jb51.net/css/467291.html box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划 ...
- spring boot+spring data jpa+gradle+mysql配置问题
1.gradle/wrapper/gradle-wrapper里要设置正确本地的gradle目录(我用的是4) 2.在src目录里的application.properties文件里,可以这样设置 # ...
- 字段like多个条件(or关系)简写
字段 like ‘匹配串1’or 字段 like ‘匹配串2’or ... 有如下简写方式 oracle: select * from tablex where REGEXP_LIKE(字段名, ' ...
- 【js】了解前端缓存,收获不止于此!
了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题.感谢赵欢同学提供doc素材. 首先,开局我画了一张图,你会对文章有一个大局了解. 今天讲的是前端缓存. 前端缓存有3大种:如图,分为H ...
- log4j日志实现重复警告slf4j-jdk14和log4j-over-slf4j
因为各种三方库依赖的log4j实现不同,所以可能会出现找到多个log4j实现的警告,但是不影响程序(logback是会影响的),如下: SLF4J: Class path contains multi ...
- Hadoop-Impala学习笔记之管理
配置参数管理 待补充... 资源分配管理(Admission Control) Impala有资源池的概念,允许某些查询在特定的资源池执行,不过在白天不跑批/晚上不跑adhoc的DSS系统中,该机制并 ...
- 拒绝QQ空间-手把手教你美化博客
为什么要美化? 博客园的主题看起来是有一些年代感了,应该是不符合当代大学生的审美了,起码我就觉得不行,所以我们要进行一些美化,但是搞技术的人的博客不应该搞得花里胡哨,最好是简洁一些(个人想法),网上有 ...
- 算法(第四版)C# 习题题解——1.3.49 用 6 个栈实现一个 O(1) 队列
因为这个解法有点复杂,因此单独开一贴介绍. 那么这里就使用六个栈来解决这个问题. 这个算法来自于这篇论文. 原文里用的是 Pure Lisp,不过语法很简单,还是很容易看懂的. 先导知识——用两个栈模 ...
- Selenium及Headless Chrome抓取动态HTML页面
一般的的静态HTML页面可以使用requests等库直接抓取,但还有一部分比较复杂的动态页面,这些页面的DOM是动态生成的,有些还需要用户与其点击互动,这些页面只能使用真实的浏览器引擎动态解析,Sel ...