2、react开发环境配置与webpack入门

时间 2019-11-14

标签 react 开发环境配置 webpack 入门栏目 React 繁體版

原文原文链接

Webpack 模块打包工具（module bundler）功能：css

将 CSS、图片与其余资源打包
打包以前预处理（Less、CoffeeScript、JSX、ES6 等）档案
依 entry 文件不一样，把 .js 分拆为多个 .js 档案
整合丰富的 Loader 可使用

1.CDN引入<script>法写React

1.理解 React 是 Component（零件）导向的应用程式设计html

2.引入 react.js 、 react-dom.js、babel-standalone 版scriptnode

3.在 <body> 编写 React Component 要插入（mount）指定节点的地方： <div id="example"></div>react

4.经过 babel 进行语言翻译 React JSX 语法， babel 会将其转为浏览器看的懂得 JavaScriptwebpack

例，第一个react（CDN引入<script>法）：web

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <!-- 如下引入 react.js, react-dom.js（react 0.14 后将 react-dom 从 react 核心分离，更符合 react 跨平台抽象化的定位）以及 babel-core browser 版-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
 </head>

 <body>

  <!--React Component 要插入的地方 -->
  <div id='example'></div>

  <!-- 如下就是包在 babel（经过进行语言翻译）中的 React JSX 语法，babel 会将其转为浏览器看的懂得 JavaScript -->
  <script type='text/babel'>
  ReactDOM.render(
    <div>hello world!</div>,
    document.getElementById('example'));
  </script>

 </body>
</html>

2.经过 Hello World 实例来介绍如何用 Webpack 设置 React 开发环境：

1.依据你的操做系统安装 Node 和 NPM（目前版本的 Node 都会内建 NPM）

node安装：https://www.runoob.com/nodejs/nodejs-install-setup.htmlajax

2.经过 NPM 安装 :webpack、webpack loader、webpack-dev-server

【此方法如今有些过期，且麻烦，国内现用方法】http://www.javashuo.com/article/p-fttheijh-bs.htmlnpm

首选：由于npm有些慢，可用国内的淘宝cnmp来代替方法参考：json

A。Webpack 中的 loader ：相似于 browserify 内的 transforms，但 Webpack 在使用上比较多元，除了 JavaScript loader 外也有 CSS Style 和图片的 loadergulp

B。webpack中的webpack-dev-server能够启动开发用 server，方便咱们测试

// 按指示初始化 NPM 设定档 package.json
$ npm init
// --save-dev 是可让你将安装套件的名称和版本资讯存放到 package.json，方便往后使用
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server

3.在根目录设定 webpack.config.js

事实上， webpack.config.js 有点相似于 gulp 中的 gulpfile.js 功用，主要是设定 webpack 的相关设定

// 这边使用 HtmlWebpackPlugin，将 bundle 好的<script> 插入到 body。${__dirname} 为 ES6 语法对应到 __dirname

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body',
});

module.exports = {
// 档案起始点从 entry 进入，由于是阵列因此也能够是多个档案
entry: [
'./app/index.js',
],
// output 是放入产生出来的结果的相关参数
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
},

module: {
// loaders 則是放想要使用的 loaders，在这边是使用 babel-loader 将全部 .js（这边用到正则）相关文件（排除了 npm 安裝的套件位置 node_modules）编译成浏览器能够阅读的 JavaScript。
//preset 则是使用的 babel 编译规则，这边使用 react、es2015。如果已经单独使用 .babelrc 做为 presets 設定的话，则能够省略 query
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
],
},
// devServer 则是 webpack-dev-server 设定
devServer: {
inline: true,
port: 8008,
},
// plugins 放置所使用的外挂
plugins: [HTMLWebpackPluginConfig],
};

4.在根目录设定 .babelrc

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

5.安装 react 和 react-dom

$ npm install --save react react-dom

6.编写 Component（记得把 index.html 以及 index.js 放到 app 文件夹底下喔！）

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Setup</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- 想要插入 React Component 的位置 -->
<div id="app"></div>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));

7.在终端机使用 webpack 进行成果展现.

webpack 相关指令：

webpack：会在开发模式下开始一次性的建置
webpack -p：会建置 production 的程式码
webpack --watch：会监听程式码的修改，当储存时有异动时会更新档案
webpack -d：加入 source maps 档案
webpack --progress --colors：加上处理进度与颜色

若是不想每次都打一长串的指令码的话可使用 package.json 中的scripts 设定：

"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --co
lors --content-base build"
}

8.当咱们此时咱们能够打开浏览器输入 http://localhost:8008 ，就能够看到Hello, world! 了！