设置React开辟环境教程

2024年5月23日 183次阅读 来源: Chakhsu

这是一篇新手向文章，主如果纪录一下运用历程，希望能赋予他人一些协助和提醒

用 Yarn 做包治理
用 Babel 做jsx和es6语法编译器
Webpack 做模块治理和打包

教程是基于macOS的，Nodejs得提早装置好。我的Nodejs和npm的版本以下

node -v
v6.9.2

npm -v
3.10.9

Yarn装置和设置

我们在 macOS 下能够经由过程brew去装置，以下

brew update
brew install yarn

Yarn 下载的包或许模块都是跟npm一个源的，因为某些缘由，下载速率异常慢，难熬痛苦，所以我们得换源

Yarn 换源和npm的源是一致的，都是同享.npmrc的设置信息，所以修正给 npm 换源就是即是给 Yarn 换源，以下

npm set registry https://registry.npm.taobao.org
npm set disturl https://npm.taobao.org/dist
npm cache clean

经由过程检察.npmrc文件搜检是不是替代源胜利

vim ~/.npmrc

项目初始化

翻开你的终端，新建文件夹然后进入该文件夹，用yarn init去做初始化,历程相似npm init，会有几个选项须要你填写，你能够依据你的须要去填写，这里我就直接一起回车就可以够了。

mkdir react-demo
cd react-demo
yarn init

init完以后，就会提醒success Saved package.json，申明初始化胜利，我们能够检察一下package.json有什么东西

vim package.json
{
    "name": "react-demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

webpack装置和设置

yarn add webpack webpack-dev-server path

装置终了，你会发明当前目次多了个yarn.lock，这个文件是Yarn用来锁定当前的依靠，不必忧郁

如今，我们已装置好webpack了，我们须要一个设置文件用来实行，以下

touch webpack.config.js

然后更新该文件内容为以下

const path = require('path');
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

从设置文件内容能够看出，为了让webpack运转，我们须要一个进口entry和一个输出output

为了能让JSX代码或许是ES6的代码也能正常在浏览器运转，我们须要loaders去装载babel-loader

更多的loaders我们能够检察 webpack文档

Babel装置和设置

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

在webpack设置历程当中，我们用到了babel-loader,除了这个外，我们一样须要babel的其他依靠

babel-preset-es2015 和 babel-preset-react这两个是 Babel 的插件，通知Babel将es2015和react的代码编译为Vanilla JS

装置终了，我们还须要去设置Babel，新建一个文件为.babelrc

touch .babelrc

然后更新该文件内容为以下

{
    "presets":[
        "es2015", "react"
    ]
}

webpack中的loader的 babel-loader 就是依据这个去实行

设置进口文件

如今我们的目次构造以下

|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

我们须要建立新的文件夹，同时在新文件夹内新建index.js和index.html文件

mkdir client
cd client
touch index.js
touch index.html

然后我们更新一下index.js的内容为

console.log('Hello world!')

一样地，我们也要更新一下index.html内容为

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

index.html是我们react组件运转在浏览器上的载体，react组件编写是jsx，同时也用到了es6，因为大多数浏览器是不支持es6和jsx，所以我们必需经由过程Babel编译这些代码，然后绑定输出显现在index.html上。

同时我们还须要html-webpack-plugin包为我们天生html

cd ..
yarn add html-webpack-plugin

装置完成后，翻开webpack.config.js然后增加下面设置信息

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

    ...

    module: {
        loaders: [
            ...
        ]
    },

    plugins: [HtmlWebpackPluginConfig]
}

我们引入html-webpack-plugin,然后建立它的实例，然后设置template、filename和inject，个中inject: 'body'是通知插件增加JavaScript到页尾，在闭合body标签前

为了能够运转它，我们须要设置package.json,在"dependencies": {}代码块前插进去以下代码

"scripts": {
    "start": "webpack-dev-server"
},

然后我们就可以够运转了

yarn start

终端涌现以下内容

Project is running at http://localhost:8080/

我们翻开浏览器，输入http://localhost:8080/，在开辟者东西的Console，发明有一段信息为Hello world!

react装置与设置

yarn add react react-dom

然后进入client目次，建立组件

cd client
mkdir components
cd components
touch App.jsx
cd ../..

如今我们项目目次构造以下

|-- node_modules
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

然后我们更新一下App.jsx文件的内容以下

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World Again</h1>
      </div>);
  }
}

我们还须要修正一下我们的进口文件index.js,替代内容为以下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

然后在终端输入yarn start

革新http://localhost:8080/,就可以看到Hello World Again

至此，经由过程 Yarn 包治理，设置webpack和Babel，去搭建编写react组件的开辟环境的新手向教程就此终了

迎接接见我的博客~ https://www.linpx.com/

    原文作者：Chakhsu
    原文地址: https://segmentfault.com/a/1190000008483352
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞