欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react.js使用webpack搭配環(huán)境的入門教程

 更新時間：2017年08月14日 11:24:53   作者：Tiey  
本文主要介紹了react 使用webpack搭配環(huán)境的入門教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

本文介紹了react.js使用webpack搭配環(huán)境的入門教程，分享給大家，也給自己做個筆記

如果你想直接上手開發(fā)，而跳過這些搭配環(huán)境的繁瑣過程，推薦你使用官方的create-react-app命令

npm install -g create-react-app //安裝create-react-app腳手架 npm為node.js的包管理工具，請確保你已經(jīng)安裝了node.js
create-react-app my-app //使用create-react-app創(chuàng)建，my-app為項(xiàng)目名稱
cd my-app/ //進(jìn)入my-app目錄
npm start //運(yùn)行項(xiàng)目

現(xiàn)在打開 http://localhost:3000/ 就能看到初始界面

 我不大愿意使用官方自帶這個腳手架，是因?yàn)樗膚ebpack配置太復(fù)雜，我比較愚鈍看不大懂，還望有大神能研究透徹分享一下。

要如何create-react-app內(nèi)部的webpack配置文件解壓出來？

npm run eject

源代碼

每次看教程我都喜歡先把項(xiàng)目跑起來，然后再一句一句代碼地去了解。如果你也是：

git clone https://github.com/lingjiawen/HelloReact.git
cd HelloReact/
npm install
npm run dev

一、創(chuàng)建項(xiàng)目結(jié)構(gòu)

新建一個文件夾，命名為HelloReact

順口提一下，我用的IDE是Sublime

在該文件夾內(nèi)這樣組織你的項(xiàng)目結(jié)構(gòu)：

|--app   //項(xiàng)目組件
 |--components   //組件結(jié)構(gòu)
 |---Hello.jsx
 |--main.js   //入口文件
|--build   //項(xiàng)目build文件
 |--index.html   //索引html
|--.babelrc   //babel轉(zhuǎn)碼工具配置文件

|--package.json  //npm說明文件，可以理解為包管理文件
|--webpack.config.js  //webpack配置文件

在build/index.html中拷貝以下代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ReactDemo1</title>
 </head>
 <body>
 <!--插入React組件的位置-->
 <div id="main">
 </div>
 <script src="bundle.js"></script>
 </body>
</html>

React代碼插入到main中，而bundle.js是webpack打包生成的js文件，在這里你可以先幫它記下來下文看到了再回來一看就清楚了。

在package.json中輸入以下代碼：

注意，所有的注釋都不要輸入進(jìn)去！

//package.json
{
 "name": "HelloReact",  //項(xiàng)目名字
 "version": "1.0.0",  //項(xiàng)目版本
 "main": "webpack.config.js", 
 "scripts": {
 "start": "webpack",  //npm start的配置
 },
 "author": "",   //作者
 "license": "ISC",
 "devDependencies": {
 //調(diào)試依賴項(xiàng)
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-plugin-react-transform": "^2.0.2",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-transform-hmr": "^1.0.4",
 "webpack": "^3.4.1",
 },
 "description": "",
 "dependencies": {
 //項(xiàng)目依賴項(xiàng)

 }
}

在webpack配置文件webpack.config.js中輸入以下代碼：

var webpack = require('webpack');//引入Webpack模塊，注意這里只能使用ES5語法引入


module.exports = {
 entry: __dirname + "/app/main.js",//唯一入口文件
 output: {
 path: __dirname + "/build",//打包后的bundle.js文件存放的地方
 filename: "bundle.js" //打包后的文件名
 },
 module: {
 //loaders加載器
 loaders: [
  {
  test: /\.(js|jsx)$/, //匹配loaders所處理的文件的擴(kuò)展名的正則，如jsx和js文件
  loader: 'babel-loader' //loader的名稱
  }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()//熱模塊替換插件
 ]
};

.babelrc是babel轉(zhuǎn)碼器的配置文件，它能將es6代碼轉(zhuǎn)換成es5代碼，還支持react語法轉(zhuǎn)換

在.babelrc中輸入以下代碼：

//.babelrc
{
 "presets": [
 "react",
 "es2015"
 ],
 "env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }
}

在app/components/Hello.jsx中輸入以下代碼：

import React from 'react'; //引入react

//創(chuàng)建組件類：名字首字母必須大寫
class Hello extends React.Component {
 render() {
 return (
  <div>Hello World!</div>
 )
 }
}

//導(dǎo)出組件
export default Hello;

React 使用 JSX 來替代常規(guī)的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴(kuò)展。

它看起來是在Javascript代碼里直接寫XML的語法，而實(shí)質(zhì)上是一個語法糖，每一個XML標(biāo)簽都會被JSX轉(zhuǎn)換工具（如babel）轉(zhuǎn)換成純Javascript代碼

在app/main.js中輸入以下代碼：

//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/Hello.jsx';

ReactDOM.render(
 <Hello />,
 document.getElementById('main')
);

二、運(yùn)行項(xiàng)目

打開命令行，cd到HelloReact文件夾目錄，運(yùn)行

npm install

該命令會安裝package.json的所有依賴文件，安裝完成后，運(yùn)行：

npm start

npm start命令是剛才你在package.json中定義的:

"scripts": {
 "start": "webpack",
 }

注：只有start可以省略run，其他都需要加上run，如 npm run dev；

你會發(fā)現(xiàn)build.js中多了bundle.js文件，這是你在webpack.config.js中定義的打包文件：

var webpack = require('webpack');//引入Webpack模塊，注意這里只能使用ES5語法引入

module.exports = {
 ……
 output: {
 path: __dirname + "/build",//打包后的bundle.js文件存放的地方
 filename: "bundle.js" //打包后的文件名
 },
 ……
};

打開該目錄下的index.html，看到以下輸出運(yùn)行成功：

三、添加熱替換模塊

項(xiàng)目已經(jīng)可以運(yùn)行了，但是每次輸完代碼都要npm start進(jìn)行打包，想想都沒辦法忍受，這就需要用到webpack-dev-server熱替換模塊，所見即所得

其實(shí)在前面的代碼中，為了避免麻煩，我已經(jīng)偷偷將熱替換模塊的部分配置加了進(jìn)去

webpack.config.js中的

……
plugins: [
 new webpack.HotModuleReplacementPlugin()//熱模塊替換插件
 ]
……

package.json中的 

 "devDependencies": {
 ……
 "babel-plugin-react-transform": "^2.0.2",
 "react-transform-hmr": "^1.0.4",
 "webpack-dev-server": "^2.6.1"
 ……
 }

還有.babelrc中的

"env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }

你可以將這些代碼刪除，發(fā)現(xiàn)也是可以正常打包并運(yùn)行。因?yàn)橹安]有用到熱加載

那我現(xiàn)在想用，要怎么用呢？

很簡單，在package.json中加入：

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

好，現(xiàn)在運(yùn)行一下npm run dev

打開localhost:8080

咦，怎么是列出文件列表，哦哦哦，原來是沒有配置默認(rèn)路徑；

…… 
"scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server --contentBase='./build' "
 }
……

重新運(yùn)行npm run dev：

 

修改app/components/Hello.jsx

 

保存后再回到頁面，發(fā)現(xiàn)頁面已經(jīng)自動更新：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • react?路由權(quán)限動態(tài)菜單方案配置react-router-auth-plus

    react?路由權(quán)限動態(tài)菜單方案配置react-router-auth-plus

    這篇文章主要為大家介紹了react路由權(quán)限動態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • react實(shí)現(xiàn)菜單權(quán)限控制的方法

    react實(shí)現(xiàn)菜單權(quán)限控制的方法

    本篇文章主要介紹了react實(shí)現(xiàn)菜單權(quán)限控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 關(guān)于react hook useState連續(xù)更新對象的問題

    關(guān)于react hook useState連續(xù)更新對象的問題

    這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對象的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • React Router 中實(shí)現(xiàn)嵌套路由和動態(tài)路由的示例

    React Router 中實(shí)現(xiàn)嵌套路由和動態(tài)路由的示例

    React Router 是一個非常強(qiáng)大和靈活的路由庫，它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能，能夠幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用和多頁應(yīng)用，這篇文章主要介紹了React Router 中如何實(shí)現(xiàn)嵌套路由和動態(tài)路由,需要的朋友可以參考下
    2023-05-05
  • React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題

    React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題

    這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • 在React中使用React.createRef：更優(yōu)雅的DOM引用方式

    在React中使用React.createRef：更優(yōu)雅的DOM引用方式

    React提供了多種方式來引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應(yīng)用,以及它為開發(fā)者帶來的便利,感興趣的朋友一起看看吧
    2024-01-01
  • React和Vue實(shí)現(xiàn)文件下載進(jìn)度條

    React和Vue實(shí)現(xiàn)文件下載進(jìn)度條

    本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • ReactDOM.render在react源碼中執(zhí)行原理

    ReactDOM.render在react源碼中執(zhí)行原理

    這篇文章主要為大家介紹了ReactDOM.render在react源碼中執(zhí)行原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • React Fiber源碼深入分析

    React Fiber源碼深入分析

    Fiber 可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React Fiber就會檢查還剩多少時間，如果沒有時間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下
    2022-11-11

最新評論