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

資訊專欄INFORMATION COLUMN

教你webpack、react和node.js環(huán)境配置(上篇)

SoapEye / 725人閱讀

摘要:這里是里面的內(nèi)容安裝如果速度太慢,建議使用淘寶的,和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容,給對象加一個屬性。

很多人剛學習react的時候,往往因為繁瑣的配置而頭疼,這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境,這篇教程包括前端react和后臺node整個網(wǎng)站的環(huán)境配置,對node沒興趣的可以只看這篇。
這里是下篇鏈接:手把手教你webpack、react和node.js環(huán)境配置(下篇)
我把所有代碼都放到了github上面供參考:webpack-react-express環(huán)境配置

1. 什么是webpack?
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔,等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換,任何形式的資源都可以視作模塊,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

2. 創(chuàng)建項目
先創(chuàng)建項目文件夾,我這里命名為blog,當成一個博客項目,當然你也可以命名成其他的。

mkdir blog && cd blog
接著用npm初始化這個項目。(使用npm之前需要先安裝node.js和npm)

npm init

這些內(nèi)容可以enter鍵全部跳過,結(jié)束后目錄里面會出現(xiàn)一個package.json文件,這個文件里面是我們項目的信息。

之后我們再創(chuàng)建兩個文件夾,分別放前端和后臺的代碼,這兩部分我會分開講。

mkdir client && mkdir server

3. client
由于我們使用的是es2015和react這些語法,所以需要用babel來編譯,命令行進入到client目錄,并且創(chuàng)建兩個目錄分別存放編譯前的代碼和編譯后的代碼。

 mkdir src && mkdir dist

我們會把js和css多帶帶打包出來,所以在dist目錄下面創(chuàng)建js和css目錄以及index.html入口文件,同時在src目錄下面創(chuàng)建幾個目錄(之后的創(chuàng)建命令行就省略了,你也可以直接右鍵創(chuàng)建文件夾)。

這是最新的項目結(jié)構(gòu):

+ blog
   + client
      + dist // 編譯并打包后的文件
        + images
        + js
        + css
        + index.html // 前端入口文件
      + src
         + assets // 圖片等靜態(tài)資源
         + components // 一些公用組件
            + form.jsx
            + form.scss
            + button.jsx
            + form.scss
         + layouts // 一些布局組件(包括jsx和sass文件),比如導(dǎo)航欄、側(cè)邊欄等等
            + sidebar.jsx
            + sidebar.scss
            + nav.jsx
            + nav.scss
         + containers // 整個頁面
            + pageA.jsx
            + pageA.scss
            + pageB.jsx
            + pageB.scss
         + redux // 和redux有關(guān)的文件
            + actions // action文件
            + reducers // reducer文件
               + rootReducer.js
            + store // 初始化的狀態(tài)
         + routes // 路由相關(guān)文件
            + routes.js  
         }//歡迎加入全棧開發(fā)交流圈一起學習交流:582735936
    ]//面向1-3年前端人員
  }   //幫助突破技術(shù)瓶頸,提升思維能力           
         + main.js // 整個前端項目的入口文件
   + server // 服務(wù)端文件
   + package.json   

這時候安裝一下項目依賴的框架和庫。

npm install react react-dom redux react-redux react-router antd css-loader style-loader node-sass sass-loader file-loader url-loader autoprefixer postcss-loader --save

這里是index.html里面的內(nèi)容:

webpack
安裝

如果npm速度太慢,建議使用淘寶的cnpm,g和save的區(qū)別建議去了解一下。

 npm install webpack -g  
 npm install extract-text-webpack-plugin --save-dev // 將css多帶帶打包的插件
 npm install path --save-dev // 和路徑

配置文件

現(xiàn)在我們在blog目錄創(chuàng)建一個webpack.config.js文件。(webpack使用commonJS的語法)

var webpack = require("webpack"),
    ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var config = {
    entry: { // 打包入口
        index: "./client/src/main.js",
        vendor: [  // 將react和react-dom這些多帶帶打包出來,減小打包文件體積
            "react",
            "react-dom"
        ]
    },
          }//歡迎加入全棧開發(fā)交流圈一起學習交流:582735936
    ]//面向1-3年前端人員
  }   //幫助突破技術(shù)瓶頸,提升思維能力
    output: { // 打包目標路徑
        path: "./client/dist",
        filename: "js/[name].js"
    },
    resolve: {
        "extentions": ["", "js"]//當requrie的模塊找不到時,添加這些后綴
    }
}

module.exports = config;
babel
Babel 是一個 JavaScript 編譯器,可以將es6、jsx等編譯為瀏覽器可以識別的語法。
安裝babel以及相關(guān)插件
 npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-plugin-import babel-cli --save-dev
使用webpack loader加載器
繼續(xù)修改webpack.config.js里面的內(nèi)容,給config對象加一個module屬性。
  var config = {
        module: {
            loaders: [{    // babel loader
                test: /.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                  presets: ["es2015", "react", "state-1"]
                }
            }, {
                test: /.(scss|sass|css)$/,  // 打包sass和css文件
                loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader!postcss-loader!sass-loader"})
            }, {
                test: /.(png|jpg|jpng|eot|ttf)$/, // 打包圖片和字體文件
                loader: "url-loader?limit=8192&name=images/[name].[ext]"
            }]
        }
    }
test一般是一段正則,用來匹配對應(yīng)類型的文件。
exclude是應(yīng)該被忽略的文件,這里指定了node_modules。
query則有兩種寫法,一種是我們上面寫的那種,另一種是放到loader后,比如:
loader: "babel-loader?presets[]=es2015&&presets[]=react&&presets[]=state-1"
不過相比這兩種方式,我更建議將這些放到一個.babelrc文件里面。
在blog目錄下面創(chuàng)建一個.babelrc文件,內(nèi)容如下:
{
    "presets": ["es2015", "react", "stage-1"],
    "plugins": [ // 這個是配置ant design的按需加載的環(huán)境
        [
            "import",
            {
                "libraryName": "antd",
                "style": "css"
            }
        ]
    ]
}

我們接著完善webpack.config.js,在config對象里面添加一個plugins屬性,這個是用來配置插件的。

var config = {
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "js/vendor.bundle.js"), //這是之前多帶帶打包出來的react、react-dom等文件
        new ExtractTextPlugin("css/index.css"), // 將所有sass/css文件打包成一個index.css文件
        new webpack.DefinePlugin({
            "process.env": { 
                NODE_ENV: JSON.stringify("production") 
            }
        }),
        new webpack.optimize.UglifyJsPlugin({ // 壓縮打包后的代碼
            compress: {
                warnings: false
            }
        })
    ]

到這里,我們的webpack環(huán)境算是全部配置完了,我們可以在main.js里面寫一段代碼進行測試。

import React from "react"
import { render } from "react-dom"

render(
    

hello, world

, document.getElementById("app") )

然后在命令行里面輸入webpack,出現(xiàn)下面這些就是成功了,這時dist/js下面會出現(xiàn)index.js和vendor.bundle.js兩個文件。

接著我們趕緊打開index.html文件來看看效果。(千萬不要忘了在index.html里面引入index.js和vendor.bundle.js)

事實證明了前端水實在太深了,只是寫一個hello world都要配置這么多東西,安裝這么多框架和庫,希望大家不要放棄,繼續(xù)愛前端。

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

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

相關(guān)文章

  • 教你webpackreactnode.js環(huán)境配置上篇

    摘要:這里是里面的內(nèi)容安裝如果速度太慢,建議使用淘寶的,和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容,給對象加一個屬性。 很多人剛學習react的時候,往往因為繁瑣的配置而頭疼,這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境,這篇教程包括前端react和后臺node整個網(wǎng)站的環(huán)境配置,對node沒興趣的可以只看這篇。這里是下篇鏈接:手把手教你...

    alexnevsky 評論0 收藏0
  • 教你webpackreactnode.js環(huán)境配置(下篇)

    摘要:上篇我介紹了前端下和等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺的配置。我把所有代碼都放到了我的上環(huán)境配置后臺這邊的配置就簡單了很多,我這里拿的框架來配置。 上篇我介紹了前端下webpack和react、redux等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺node.js的配置。 我把所有代碼都放到了我的github上:webpack-react-express環(huán)境配置 server 后臺這邊的配置就...

    Sourcelink 評論0 收藏0
  • 教你webpackreactnode.js環(huán)境配置(下篇)

    摘要:上篇我介紹了前端下和等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺的配置。我把所有代碼都放到了我的上環(huán)境配置后臺這邊的配置就簡單了很多,我這里拿的框架來配置。 上篇我介紹了前端下webpack和react、redux等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺node.js的配置。 我把所有代碼都放到了我的github上:webpack-react-express環(huán)境配置 server 后臺這邊的配置就...

    TNFE 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<