使用 Babel + React + Webpack 搭建 Web 应用

话不说直接上正题。

环境搭建

  1. Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现在只能是尽力重现一下。

  Babel6版本开始已经不支持使用npm install babel -g 安装了,它分成了几个部分

  • babel cli,适用于命令行
  • babel-core,包含node api
npm install babel-cli -g
npm install babel-core --save-dev

  babel需要手动安装插件

npm install babel-preset-es2015

  

然后在命令行输入vim .babelrc在文件夹下面创建一个叫.babelrc的文件,并写入如下代码:

{
	"presets": ["es2015"]
}

然后保存退出。

2.配置webpack

可以参考

http://www.cnblogs.com/vajoy/p/4650467.html

  

时间: 2024-11-12 07:27:46

使用 Babel + React + Webpack 搭建 Web 应用的相关文章

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

详解 Webpack+Babel+React 开发环境的搭建

1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫 learn-webpack 的项目并进入该项目文件夹,当然项目名字你可以起你自己想

react+webpack+ES6搭建项目

react+webpack+ES6打包搭建框架的步骤及部分详解 npm init 此条命令是创建一个npm项目 NPM 全称 node package manager, 是 nodejs 的包管理工具,使用它让我们可以更方便的使用别人的代码,以及向别人分享我们的代码. 执行后,npm会引导输入一些基本信息,可以默认按回车键,然后会生成一个package.json文件,包含基本信息,后续的依赖也会保存到它里边. npm install react react-dom --save 安装react和

最小白的webpack+react环境搭建

本文也同步发表在我的公众号"我的天空" 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭建相关的环境,本来网上的教程很不错,只是前端相关的东西发展太过迅猛,只相隔了半年有些东西的版本就不对了,有些配置.命令等照着之前的教程做就可能会掉到坑里去,别问我怎么知道的,我刚刚从坑里爬出来,因此赶紧写篇文章来记录一下,也算是让自己再巩固一下. 本篇完全是从零开始,用最少的配置.最少的代

使用webpack搭建react项目 webpack-react-project

webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.config.js 首先创建一个项目文件夹,并进入到该文件夹: mkdir react-webpack-project 初始化项目:npm init 根据提示创建package.json 通过NPM安装webpack和webpack-cli,其中-D相当于--save-dev: npm install we

react+webpack基础学习配置

最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目,过程还算顺利.总结一下步骤: 1.创建一个项目文件夹Blog,cd进入文件夹目录,输入 npm init -y 生成package.json文件: 2.工程目录创建,如下如是我的工程目录 public是webpack打包后生成的文件夹,src是逻辑组件文件夹,assets是静态文件 webpack

React + Webpack (jsx +less)

React项目的初始化.webpack的安装.如何使用jsx和less. 一.初始 React 项目 react项目的初始化比较简单,我用的就是react的脚手架.三种方式: 1.NPM npm init react-app my-app 2.NPX npx create-react-app my-app 3.Yarn yarn create react-app my-app my-app 是项目的名字,运行命令时会在当前目录下自动创建一个名字叫作 my-app 的项目文件夹.命令运行完毕,简单

scss + react + webpack + es6

scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程.再趁热打铁加上react React分析 JS实现 对于js来说,下面按钮一点击,就能根据当前的索引为按钮和图片绑定对应好的样式:取到对应的DOM元素,加上定义好的样式名,就能实现绑定效果. React实现 但对于React来说,组件化开发

部署React+webpack工程的步骤

# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部署: (1),在终端中找到react-build项目的目录,键入cnpm init初始化一个package.json文件,该文件是存放接下来项目用的一些模块, 在终端中根据提交一步步的输入,或者可以直接新建一个package.json文件,文件内容大概如下: { "name": "