搭建一个React项目环境
起首npm init
天生package.json
文件.
至此我们就能够装置react
的相干依靠了。
npm install react --save
npm install react-dom --save
装置完react相干,下一步装置webpack
npm install webpack --save-dev
npm install webpack-dev-server --save-dev //完成热加载
webpack装置完babel是重头戏!babel
更新了7版本后,舍弃了之前的 babel-– 的定名体式格局,改成了@babel/-–的定名体式格局,经由过程试错后,将经常运用依靠
,以及.babelrc文件设置
在此列出以供参考。
//devDependencies下的依靠
npm install @babel/core --save-dev //babel中心部份,把ES6转化成ES5
npm install @babel/plugin-transform-runtime --save-dev //外部援用辅佐函数和内置函数,自动添补代码而不会污染全局变量。
npm install @babel/preset-env --save-dev //供应环境的映照取得插件列表并传递给babel
npm install @babel/preset-react --save-dev //剖析JSX
npm install babel-loader --save-dev //webpack须要用到这个loader
//dependencies下的依靠
npm install @babel/polyfill --save //转义es6的API
npm install @babel/runtime --save //babel变更运行时插件的依靠
上述是babel的环境装置,下面来看下.babelrc的文件设置
,在根目录下建立.babelrc文件
//.babelrc文件内容
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
下面在根目录新建一个webpack.config.js文件,到场以下内容
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: "bundle.js"},module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
基础上设置内容都OK了!下面增添页面内容
增添页面内容
基础设置都有了,如今要往里面增添内容了,起首第一步在根目录下建立index.html文件
,以后在根目录建立src文件夹
用来放我们新增的组件。
进口文件我在webpack中配的./src/app.js
,所以在src下新建app.js文件,增添我们的第一个组件。
//根目录下index.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
//src下的app.js文件内容
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render(){
return <div>hello world</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
如今内容有了,我们把package.json中的script部份改成如许:
"scripts": {
"start": "webpack-dev-server --hot --inline --mode development --colors --content-base",
"build": "webpack --progress --colors --mode production"
}
功德圆满啦!如今运用npm start
启动你的项目吧!结果如图