国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React項(xiàng)目實(shí)戰(zhàn):環(huán)境搭建

GHOST_349178 / 2767人閱讀

摘要:官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn),中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋,如遇到錯(cuò)誤或者不理解的內(nèi)容,歡迎實(shí)時(shí)指出。

前言

前面提到前端大統(tǒng)一的概念,如果感興趣,歡迎說說自己的看法,點(diǎn)擊前往。Web前端框架層出不窮,不可能面面俱到,這里給個(gè)小建議:

如果對(duì)Weex App感興趣,應(yīng)該選擇vue框架;

如果對(duì)React Native App感興趣,應(yīng)該選擇React.js框架;

本系列文章是React技術(shù)棧,Vue技術(shù)棧將會(huì)在本系列文章結(jié)束后陸續(xù)更新。

技術(shù)棧

由于本系列的文章是項(xiàng)目實(shí)戰(zhàn),需要有相關(guān)的技術(shù)基礎(chǔ),可以到下方給出的鏈接進(jìn)行深入學(xué)習(xí)。項(xiàng)目實(shí)戰(zhàn)用到的主要框架和插件有:

webpack:預(yù)編譯模塊打包工具。 官方文檔 - 中文翻譯

React:構(gòu)建用戶界面的JavaScript庫。 官方文檔 - 中文翻譯

Redux:管理整個(gè)應(yīng)用的數(shù)據(jù)流。 官方文檔 - 中文翻譯

react-router:React應(yīng)用路由庫。 官方文檔

styled-components:React中的CSS最佳實(shí)踐。 官方文檔

isomorphic-fetch:fetch兼容庫。 官方文檔

JRoll2:移動(dòng)前端滑動(dòng)插件。 官方文檔

ECharts:基于html5 Canvas圖表庫。 官方文檔

建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn),中文翻譯或者第三方作者的教程可以幫助你理清思路;會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋,如遇到錯(cuò)誤或者不理解的內(nèi)容,歡迎實(shí)時(shí)指出。

環(huán)境搭建

環(huán)境搭建是最為枯燥和最容易出錯(cuò)的地方,不過作為開發(fā)者,我們還是很有必要了解配置的具體步驟,在后面一段時(shí)間會(huì)發(fā)布一個(gè)簡(jiǎn)易版環(huán)境搭建教程。

系統(tǒng)環(huán)境:Win10 + 關(guān)閉安全管家

Node.js安裝

到官方網(wǎng)站下載安裝包 點(diǎn)擊前往,選擇LTS版本(9.0以后的版本在安裝styled-components時(shí)會(huì)報(bào)錯(cuò))。

npm部署

npm更新并部署至全局

npm install npm  -g

#【可選】設(shè)置淘寶鏡像
npm config set registry https://registry.npm.taobao.org

npm常用命令:

npm init    #引導(dǎo)創(chuàng)建package.json文件
npm install ***    #本地安裝;會(huì)在當(dāng)前目錄生成node_modules文件夾,并在此安裝node模塊
npm install *** -g    #全局安裝;會(huì)在C:Users***AppDataRoaming
pm
ode_modules安裝
npm install *** --save    #運(yùn)行時(shí)依賴的模塊;自動(dòng)把模塊和版本號(hào)添加到package.json文件dependencies部分
npm install *** --save-dev    #開發(fā)時(shí)依賴的模塊;自動(dòng)把模塊和版本號(hào)添加到package.json文件devdependencies部分
npm update ***    #更新node模塊
npm uninstall ***    #卸載node模塊
創(chuàng)建package.json文件

項(xiàng)目根目錄:D:web eact-webapp-demo,請(qǐng)根據(jù)自己實(shí)際情況設(shè)置。

cd D:web
eact-webapp-demo    #在PowerSell中打開項(xiàng)目目錄
npm init -y    #跳過提問階段,直接生成一個(gè)新的 package.json 文件。
安裝模塊
npm install --save react react-dom redux react-redux redux-logger redux-thunk react-router react-router-redux@next history styled-components isomorphic-fetch jroll jroll-pulldown jroll-infinite echarts babel-polyfill
npm install --save-dev webpack webpack-dev-server webpack-merge clean-webpack-plugin babel-loader babel-core babel-preset-env babel-preset-react css-loader style-loader file-loader url-loader html-webpack-plugin uglifyjs-webpack-plugin

模塊簡(jiǎn)要說明:

react react-dom:React依賴
redux react-redux redux-logger redux-thunk:Redux依賴
react-router react-router-redux history:react-router依賴
styled-components:React中的CSS的實(shí)現(xiàn)依賴
isomorphic-fetch:fetch兼容庫
jroll jroll-pulldown jroll-infinite:JRoll插件依賴
echarts:基于html5 Canvas圖表庫
babel-polyfill:用于實(shí)現(xiàn)瀏覽器不支持原生功能的代碼
webpack:預(yù)編譯模塊打包
webpack-dev-server:實(shí)時(shí)重新加載的Web服務(wù)器
webpack-merge:webpack配置分離插件
clean-webpack-plugin:在building之前刪除你以前build過的文件
babel-loader babel-core babel-preset-env babel-preset-react:轉(zhuǎn)碼器babel依賴
css-loader style-loader file-loader url-loader:各格式文件打包依賴
html-webpack-plugin:生成HTML5文件的插件
uglifyjs-webpack-plugin:代碼壓縮插件

配置模塊

在項(xiàng)目根目錄生成.babelrc文件(Windows系統(tǒng)下文件重命名為.babelrc.),并寫入如下數(shù)據(jù)

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

配置package.json:運(yùn)行npm run build啟動(dòng)編譯模式和npm run start熱更新模式;

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
},

根目錄新建webpack配置文件:webpack.common.jswebpack.dev.jswebpack.prod.js;

webpack.common.js(共用配置)

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
    entry: ["babel-polyfill","./src/index.js"],    //項(xiàng)目的起點(diǎn)入口
    output: {    //項(xiàng)目輸出配置
        path: path.resolve(__dirname, "build"),    //文件的輸出目錄 
        filename: "static/js/[name].[hash:5].js"
    },
    module: {    //模塊加載
        rules: [
            {
                test: /.css$/,    //匹配規(guī)則
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },{
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },{
                test: /.(png|svg|jpg|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 8192,    //小于8192B的文件轉(zhuǎn)為base64文件
                        name: "static/images/[name].[hash:5].[ext]"
                    }
                }
            }
        ]
    },
    plugins: [    //插件配置
        new CleanWebpackPlugin(["build"]),    //清空編譯輸出文件夾
        new HtmlWebpackPlugin({
            title: "Cinglong"s Demo",
            filename: "index.html",
            template: path.resolve(__dirname, "templates", "index.html")
        }),    //生成Html5文件
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons"
        }),    //共用代碼打包
    ]
};

webpack.dev.js(開發(fā)配置)

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const webpack = require("webpack");

module.exports = merge(common, {
    devtool: "inline-source-map",    //代碼關(guān)聯(lián)顯示方式
    devServer: {
        historyApiFallback:true,    //文件重定向,和react-router相關(guān)
        hot: true,    //開啟模塊熱替換
        port: 80,    //服務(wù)器端口
        host: "192.168.23.101",    //服務(wù)器域名
        open: true    //自動(dòng)打開瀏覽器標(biāo)簽
    },
    plugins: [
        new webpack.NamedModulesPlugin(),    //顯示模塊的相對(duì)路徑
        new webpack.HotModuleReplacementPlugin()    //加載熱替換插件
    ]
});

webpack.prod.js(預(yù)編譯配置)

const merge = require("webpack-merge");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    plugins: [
        new UglifyJSPlugin()    //代碼壓縮
    ]
});
項(xiàng)目目錄
 react-webapp-demo
  |- /node_modules    //模塊安裝目錄
  |- /src    //代碼目錄
    |- /container    //容器組件
    |- /presentational    //展示組件
      |- /images    //圖片目錄
    |- /reducers    //reducers操作
    |- /utils    //其他
    |- index.js    //項(xiàng)目入口
  |- /templates    //模板目錄
  |- .babelrc    //babel編譯配置
  |- package.json    //項(xiàng)目目錄配置
  |- package-lock.json    //模塊信息(自動(dòng)生成)
  |- webpack.common.js    //webpack共用配置
  |- webpack.dev.js    //webpack開發(fā)配置
  |- webpack.prod.js    //webpack編譯配置
系列目錄

前端大統(tǒng)一時(shí)代即將來臨?

React項(xiàng)目實(shí)戰(zhàn):環(huán)境搭建

React項(xiàng)目實(shí)戰(zhàn):react-redux-router基本原理

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51557.html

相關(guān)文章

  • React項(xiàng)目實(shí)戰(zhàn)環(huán)境搭建

    摘要:官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn),中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡(jiǎn)明的解釋,如遇到錯(cuò)誤或者不理解的內(nèi)容,歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念,如果感興趣,歡迎說說自己的看法,點(diǎn)擊前往。Web前端框架層出不窮,不可能面面俱到,這里給個(gè)小建議: 如果對(duì)Weex App感興趣,應(yīng)該選擇vue框架; 如果...

    cnio 評(píng)論0 收藏0
  • DevOps 基于Walle的小型持續(xù)集成實(shí)戰(zhàn)(二)設(shè)計(jì)

    摘要:以便對(duì)整個(gè)持續(xù)集成印象加深。配置完各環(huán)境發(fā)布腳本后,則可以使用構(gòu)建發(fā)起進(jìn)行觸發(fā)環(huán)境準(zhǔn)備。并會(huì)在遠(yuǎn)程環(huán)境上存放多次發(fā)布的版本,用于回退和切換服務(wù)停用。進(jìn)行等操作,停止原本運(yùn)行的服務(wù)切換啟用。 該文章用于建立一個(gè)小型的基于Walle的持續(xù)集成工具。解決java,react,angular項(xiàng)目的編譯發(fā)布。以便對(duì)整個(gè)持續(xù)集成印象加深。官方網(wǎng)站:https://walle-web.io/ 適用...

    zr_hebo 評(píng)論0 收藏0
  • React+dva+webpack+antd-mobile 實(shí)戰(zhàn)分享(一)

    摘要:再看本篇文章之前,本人還是建議想入坑的童鞋可以選有來創(chuàng)建的項(xiàng)目,因?yàn)楝F(xiàn)在和還不成熟,坑相對(duì)要多一些,當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備,那么請(qǐng)繼續(xù)往下走本文適合對(duì)有一定了解的人。 再看本篇文章之前,本人還是建議想入坑react的童鞋可以選有create-react-app來創(chuàng)建react的項(xiàng)目,因?yàn)楝F(xiàn)在dva和roadhog還不成熟,坑相對(duì)要多一些,當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備,那么請(qǐng)繼續(xù)往...

    ziwenxie 評(píng)論0 收藏0
  • 在Windows下搭建React Native Android開發(fā)環(huán)境,android開發(fā)mvp模式

    摘要:在這個(gè)過程中可能會(huì)出現(xiàn)一些問題,導(dǎo)致失敗你沒有配置需要再系統(tǒng)變量中加入這個(gè),指到目錄。所以面試沒有其他的訣竅,只看你對(duì)這些知識(shí)點(diǎn)準(zhǔn)備的充分程度。本文已被開源項(xiàng)目學(xué)習(xí)筆記總結(jié)移動(dòng)架構(gòu)視頻大廠面試真題項(xiàng)目實(shí)戰(zhàn)源碼收錄 在這個(gè)過程中可能會(huì)出現(xiàn)一些問題,導(dǎo)致build失敗: 1. 你沒有配置ANDROID_HOME,...

    番茄西紅柿 評(píng)論0 收藏2637

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

0條評(píng)論

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