快捷導(dǎo)航

從零開始學(xué)習(xí)搭建React腳手架項(xiàng)目

更新時(shí)間：2018年08月23日 09:52:44 作者：隨風(fēng)飄遠(yuǎn)

這篇文章主要介紹了從零開始學(xué)習(xí)搭建React腳手架項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

寫在前面

準(zhǔn)備學(xué)習(xí)一下react和webpack相關(guān)的東西，官方的腳手架看起來(lái)太繁瑣，所以打算自己來(lái)搭建一個(gè)，參考了這個(gè)文檔從零搭建React全家桶框架教程;步驟上都差不多

react和vue,angular一樣也有腳手架。這大大方便了我們的開發(fā)。react的腳手架是create-react-app。

腳手架下載

使用npm下載create-react-app運(yùn)行如下命令：

npm install -g create-react-app

國(guó)內(nèi)npm一般下載比較慢或者是常出現(xiàn)下載失敗的情況，我們可以指定下載的倉(cāng)庫(kù)：

npm install -g create-react-app --registry https://registry.npm.taobao.org

或者直接設(shè)置npm的默認(rèn)倉(cāng)庫(kù)：

npm config set registry https://registry.npm.taobao.org

第一步，依賴總覽

完成到我現(xiàn)在半成品的過(guò)程中，目前完成開發(fā)模式的相關(guān)操作，添加了babel,less,antd按需加載的地步。總體的package.json情況如下：

    {
      "name": "myreact",
      "version": "1.0.0",
      "description": "test react",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
      },
      "keywords": [
        "test",
        "react"
      ],
      "author": "xxxx",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^9.1.2",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-import": "^1.8.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.8.1",
        "less-loader": "^4.1.0",
        "postcss-import": "^12.0.0",
        "postcss-loader": "^3.0.0",
        "react-hot-loader": "^4.3.4",
        "style-loader": "^0.22.1",
        "webpack": "^4.16.5",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.5"
      },
      "dependencies": {
        "antd": "^3.8.2",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-router-dom": "^4.3.1"
      }
    }

暫時(shí)做到這些依賴，需要指出的是，webpack4和以前的版本可能有差別（不一定，或許是我沒有注意到）如果需要在scrpit屬性中配置，使用cli的方式運(yùn)行，就需要安裝webpack-cli，需要行內(nèi)命令行的方式運(yùn)行，就需要安裝webpack-command,當(dāng)然，一起安裝應(yīng)該也沒有什么問(wèn)題。這里是和教程里面配置的不一樣的地方。

然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development這個(gè)參數(shù)。這也是教程中沒有提到的部分。

關(guān)于babel配置

babel的相關(guān)依賴，有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,這個(gè)是babel的相關(guān)依賴，等等，有人可能會(huì)看到babel-plugin-import沒有提到，這個(gè)模塊的用途是為了antd的按需加載的?？梢钥纯丛敿?xì)的babelrc文件：

{
  "presets": [
   "es2015",
   "react",
   "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
   ]
 }

以上是babel的配置，preset的值就是那三個(gè)模塊，至于作用，es2015是為了處理es6語(yǔ)法的，react是為了處理jsx語(yǔ)法的，stage-0是為了支持新特性的。

至于插件的配置，react-hot-loader/babel是為了熱更新，不丟失狀態(tài)，這點(diǎn)教程中已經(jīng)說(shuō)到了。下邊的import這個(gè)，就是上邊提到的babel-plugin-import的配置，也是antd的按需加載，官方推薦的配置。

還需要提到一點(diǎn)，這里可能一些新特性還是支持不夠，比如async/await語(yǔ)法，可能需要再安裝babel-plugin-transform-runtime這個(gè)模塊，babelrc文件的plugins還需要配置"transform-runtime"這個(gè)插件進(jìn)去，以支持新特性。

依賴相關(guān)的就說(shuō)到這里。

webpack的配置

我這邊直接在根目錄下的config目錄創(chuàng)建了webpack.dev.config.js,具體的配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 
  /*入口*/
  entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
  
  /*輸出到dist文件夾，輸出文件名字為bundle.js*/
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    historyApiFallback: true
  },
  module: {
    rules: [{
      test: /\.js[x]?$/,
      use: ['babel-loader?cacheDirectory=true'],
      include: path.join(__dirname, '../src')
    },{
      test: /\.css$/,
      use: ['style-loader','css-loader','postcss-loader'],
      
    },
    {
      test: /\.less$/,
      use:[ 'style-loader',
        {loader: 'css-loader',options:{importLoaders:1}}, 
       'less-loader'],
      
    }]
  },
  plugins:[new HtmlWebpackPlugin({
    title:'react測(cè)試',
    template:'./src/index.html',
    filename:'./dist/index.html'
  })],
  devtool: 'inline-source-map',
  resolve:{
    alias: {
      "@":path.join(__dirname, '../src/')
    }
  }

};

這邊的配置就沒啥說(shuō)的，基本上loader的配置，目前完成js(x)的處理，css/less的處理，和其他的常規(guī)cli配置，少了url-loader,file-loader，代碼分割這些功能。

完結(jié)

差不多配置就是這樣，很簡(jiǎn)陋，功能也不齊全，需要完成的工作還有很多。不過(guò)自己動(dòng)手，豐衣足食……

項(xiàng)目的github地址 diy-react-cli歡迎各位來(lái)串門喲！

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

您可能感興趣的文章: