亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

快速搭建 webpack + react 環(huán)境

孫淑建 / 2903人閱讀

安裝

首先你需要點(diǎn)擊這里安裝 nodejs（npm）。然后執(zhí)行：

建立一個(gè)目錄作為項(xiàng)目根目錄并初始化：

mkdir react-webpack
cd react-webpack/
npm init

安裝相關(guān)組件

這里包括了本文所需要的全部組件

npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-plugin-react-transform css-loader style-loader less less-loader react-transform-catch-errors redbox-react --registry=https://registry.npm.taobao.org

下面簡(jiǎn)單說明上述組件功能

react: react基礎(chǔ)組件

react-dom: react 操作 DOM 組件

react-transform-hmr: hot module reloading 為熱替換依賴插件

webpack: webpack 基礎(chǔ)組件

webpack-dev-server: webpack 服務(wù)器組件

babel-core: babel 核心組件

babel-loader: 轉(zhuǎn)碼工具

babel-preset-react: 支持 react 轉(zhuǎn)碼

babel-preset-es2015: 支持 ES6 轉(zhuǎn)碼

babel-plugin-react-transform: 實(shí)現(xiàn) babel 熱替換

css-loader: 對(duì) css 文件進(jìn)行打包

style-loader: 將樣式添加進(jìn) DOM 中

less: less 語(yǔ)法支持

less-loader: 對(duì) less 文件進(jìn)行打包

react-transform-catch-errors: 將錯(cuò)誤顯示在瀏覽器中

redbox-react: 渲染插件，配合上一個(gè)使用顯示錯(cuò)誤

hello world

建立如下目錄結(jié)構(gòu)(圖中不包括 node_modules 目錄，實(shí)際項(xiàng)目中必須保留，下同)

其中 webpack.config.js 內(nèi)容如下

var path = require("path");
var webpack = require("webpack");

module.exports = {
  devtool: "eval-source-map",   //開啟 soursemap
  entry: path.resolve(__dirname, "./src/index.js"),  //指定入口
  output: {      //設(shè)置輸出路徑
    path: path.resolve(__dirname, "./build"),
    filename: "index.js"
  },
  module: {    //設(shè)置 babel 模塊
    loaders: [{
      test: /.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }]
  },
  plugins: [    //加載插件
    new webpack.HotModuleReplacementPlugin() //熱模塊替換插件
  ]
};

其中 .babelrc 內(nèi)容如下：

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

其中 src/index.js 內(nèi)容如下：

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  
Hello World
,
  document.getElementById("root")
);

其中 build/index.html 內(nèi)容如下：




  
  demo

修改 package.json 中的 scripts 部分如下：

"scripts": {
  "build": "webpack"
}

而后運(yùn)行 "npm run build" 運(yùn)行在本地 "./build/index.html" 看到渲染的頁(yè)面

服務(wù)器環(huán)境配置

修改或添加 webpack.config.js 中以下部分：

entry: ["webpack/hot/dev-server", path.resolve(__dirname, "./src/index.js")],  //指定入口
devServer: {   //配置本地服務(wù)器
  contentBase: "./build",
  colors: true,
  historyApiFallback: true,
  inline: false,
  port: 4444,
  process: true
}

修改 package.json 中的 scripts 部分如下：

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

而后運(yùn)行 "npm run dev" 運(yùn)行在本地 "http://localhost:4444/" 看到渲染的頁(yè)面


## 配置 css 和 less

在 ./src/ 中添加 index.less 和 font.css，分別寫入以下內(nèi)容測(cè)試功能

/ index.less /
h1 {
background-color: red;
}
/ font.css /
h1 {
color: yellow;
}

修改 webpack.config.js 部分：

module: { //設(shè)置 babel 模塊
loaders: [{

test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"

},{

test: /.css$/,
loader: "style-loader!css-loader"

},{

test: /.less$/,
loader: "style-loader!css-loader!less-loader"

}]
}

修改 src/index.js 如下：

import React from "react";
import ReactDOM from "react-dom";
import "./font.css";
import "./index.less";

ReactDOM.render(

Hello World

,
document.getElementById("root")
);

然后重啟運(yùn)行(由于修改了 webpack.config.js，不能使用熱替換)頁(yè)面可以看到相關(guān)樣式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97604.html

相關(guān)文章

  • 從react-start到co源碼(一)

    摘要：安裝這個(gè)預(yù)設(shè)主要包含了如下兩個(gè)插件實(shí)現(xiàn)熱加載捕獲中的方法并展現(xiàn)在界面上修改上述的文件文件通過上面的幾個(gè)步驟我們就大致完成了開發(fā)環(huán)境的基本搭建。應(yīng)該在中進(jìn)行配置以上就是簡(jiǎn)單的環(huán)境搭建后面會(huì)推出后續(xù)的文章。 react作為當(dāng)前十分流行的前端框架，相信很多前端er都有蠢蠢欲動(dòng)的學(xué)習(xí)它的想法。工欲善其事，必先利其器。這篇文章就簡(jiǎn)單的給大家介紹一下如何我快速的搭建一個(gè)react前端開發(fā)環(huán)境。主要...

    gekylin 評(píng)論0 收藏0

  • ? 使用 Dawn 快速搭建 React 項(xiàng)目！

    摘要：開發(fā)一個(gè)項(xiàng)目，通常避免不了要去配置和之類，以支持或模塊及各種新語(yǔ)法，及進(jìn)行語(yǔ)法的轉(zhuǎn)義。當(dāng)然也可以用腳手架快速創(chuàng)建一個(gè)項(xiàng)目，但與此同時(shí)常常又顯的不太自由。本文是一篇使用入門文章，介紹如何從零開始手動(dòng)配置一個(gè)基于的工程。 開發(fā)一個(gè) React 項(xiàng)目，通常避免不了要去配置 Webpack 和 babel 之類，以支持 commonjs 或 es 模塊及各種 es 新語(yǔ)法，及進(jìn)行 jsx 語(yǔ)法...

    Ethan815 評(píng)論0 收藏0

  • 手把手教你從零搭建react局部熱加載環(huán)境

    摘要：有沒有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載，我們需要添加插件。 前言 用了3個(gè)多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工，對(duì)于vue的api使用到達(dá)了一定瓶頸，無(wú)奈水平有限，每每深入底層觀賞源碼時(shí)候都迷失了自己。 遂決定再找個(gè)框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對(duì)React、RN技術(shù)垂涎已久,于是決定找找教程來學(xué)習(xí)。無(wú)奈第一步就卡在了環(huán)境搭...

    quietin 評(píng)論0 收藏0

  • react基于webpack和Babel 6上的開發(fā)環(huán)境搭建

    摘要：可能在項(xiàng)目正式上線的時(shí)候才需要發(fā)布配置單文件入口版本新建一個(gè)和開發(fā)環(huán)境不同的是，入口和出口。相應(yīng)的在的源也要進(jìn)行修改。加載模塊發(fā)布配置多文件模式庫(kù)最好就不要打包進(jìn)來。因?yàn)橐话銕?kù)都是不會(huì)改動(dòng)的。所以這里就要進(jìn)行庫(kù)的分離。 react-js開發(fā)環(huán)境 時(shí)間：2016.3.19-12:29作者：三月懶驢基于：react版本：0.14基于：babel版本：6相關(guān)代碼：github 開始一個(gè)項(xiàng)目 ...

    callmewhy 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)踐系列一

    摘要：在此我們選用用友的公共靜態(tài)資源庫(kù)。因此打算建立遠(yuǎn)程的其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了平臺(tái)。 數(shù)據(jù)分析平臺(tái)-實(shí)踐系列一 項(xiàng)目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項(xiàng)目的實(shí)踐過程以及自己對(duì)前端的學(xué)習(xí)與體悟。 技術(shù)選型 框架： React 路由： React-Router 4 狀態(tài)管...

    DC_er 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<