2.4 KiB
2.4 KiB
title | localeTitle |
---|---|
Setting Up a React Es6 and Webpack Project | 设置React Es6和Webpack项目 |
这个wiki将指导您如何设置一个使用React,Webpack和ES6的简单项目。我们将深入介绍所有设置。
对于这个项目,我们将使用Webpack,它是一个模块捆绑器,并且通常用在React项目中。
React与ES6配合得很好 ,所以我们将在代码中使用ES6。
ES6是该语言的重要更新,也是自2009年ES5标准化以来该语言的第一次更新。
- lukehoban
ES6在浏览器中不起作用,但我们可以使用Babel手动将其转换为ES5。
我们使用的技术的一个关键特性是我们的index.html
文件将引用一个捆绑的JavaScript文件,我们可以在其中引用其他JavaScript文件,而不是使用script
标记从HTML文件中引用它们。
先决条件
本教程旨在为您提供一个可扩展的简单骨骼结构。对于想要学习React和ES6的人来说,它应该是一个很好的起点。如果你还没有使用JavaScript或jQuery构建任何东西,你应该先在FreeCodeCamp地图中进行一些练习。
在开始之前,请确保在最新版本中安装了NodeJS和Node Package Manager 。
快速说明
以下是本教程中提到的所有说明的列表。
npm install webpack webpack-dev-server -g
mkdir react-webpack-example && cd $_
touch webpack.config.js
npm init
npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .gitignore
- 写
.gitignore
(使用https://www.gitignore.io/api/node ) mkdir src
mkdir dist
mkdir src/js
touch src/js/client.js
touch dist/index.html
- 写
dist/index.html
- 写
src/js/client.js
- 写
webpack.config.js
webpack
webpack-dev-server --content-base dist
- 在浏览器中打开Webpack Dev Server路由。完成!