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! 了！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。