create-react-app全家桶router?mobx全局安裝配置的方法

本篇內(nèi)容主要講解“create-react-app全家桶router mobx全局安裝配置的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“create-react-app全家桶router mobx全局安裝配置的方法”吧!

ceacte-react-app 初始化項(xiàng)目

全局安裝 create-react-app

npm install -g create-react-app

or

yarn -g create-react-app

新建一個(gè)項(xiàng)目

create-react-app react-demo

工具會(huì)幫你初始化一個(gè)簡(jiǎn)單基本的項(xiàng)目并且會(huì)自動(dòng)幫你安裝項(xiàng)目所需要的各種依賴，如果中途出現(xiàn)網(wǎng)絡(luò)問(wèn)題導(dǎo)致依賴安裝不上，這時(shí)你可能需要配置代理或者設(shè)置其他的 npm 源。關(guān)于 npm 源鏡像有很多選擇，比如淘寶鏡像等，這里不多做說(shuō)明，網(wǎng)上有很多。

進(jìn)入項(xiàng)目并啟動(dòng)

cd react-demo
npm start

or

yarn start

此時(shí)瀏覽器會(huì)自動(dòng)訪問(wèn) http://localhost:3000/，你會(huì)看到一個(gè) react 的歡迎界面，如下：代表你的項(xiàng)目已經(jīng)正常運(yùn)行了

但是：這仍然不夠，這時(shí)你用代碼編輯器打開項(xiàng)目會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)其實(shí)是這樣的：

react-demo/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

找不到 webpack 的配置項(xiàng)，此時(shí)你需要展開 (eject) 項(xiàng)目，這個(gè)一個(gè)不可逆過(guò)程，一旦你執(zhí)行了，就不能回到初始化

npm run eject

再看項(xiàng)目結(jié)構(gòu)，就會(huì)多了一些其他目錄，如下：

react-demo/
  README.md
  config/
    jest/
    env.js
    paths.js
    polyfills.js
    webpack.config.dev.js
    webpack.config.prod.js
    webpackDevServer.config.js
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  scripts/
    build.js
    start.js
    test.js
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

展開 config 目錄，里面就有 webpack 配置文件，還有一些環(huán)境、兼容、測(cè)試等的配置。而 scripts 目錄里主要就是測(cè)試、啟動(dòng)、打包的腳本，這里不做過(guò)多描述，(其實(shí)筆者也沒(méi)認(rèn)真看過(guò)里面的代碼)，如果要詳細(xì)研究，create-react-app 的官方文檔有詳細(xì)的講解。

好了，現(xiàn)在 react 項(xiàng)目已經(jīng)跑起來(lái)了，也找到 webpack 配置，可以做一些自定義的配置，接下來(lái)我們就講一將，如何配置數(shù)據(jù)流以及UI庫(kù)。

sass 的配置

安裝 loader 依賴

npm install resolve-url-loader sass-loader node-sass --save

修改 webpack配置文件

找到 webpack.config.dev.js 與 webpack.config.prod.js 文件，后綴 dev 表示開發(fā)的配置，prod 表示是生產(chǎn)環(huán)境的配置，因此兩個(gè)配置文件都需要修改。

• 修改webpack.config.dev.js在 module 的 rules 字段中添加以下代碼

{
  test: /\.scss$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'), // translates CSS into CommonJS
      options: {
        sourceMap: true,
        importLoaders: 3,
      },
   },
   require.resolve('resolve-url-loader'), // resolves relative paths in url() statements based on the original source file
   {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            flexbox: 'no-2009',
          }),
        ],
     },
   },
   {
      loader: require.resolve('sass-loader'),  // compiles Sass to CSS,
      options: {
        includePaths: [`${paths.appNodeModules}/normalize-scss/sass`],
      },
    },
  ],
},

這時(shí)修改 .css 樣式文件為 .scss 并用 sass 語(yǔ)法修改樣式，會(huì)發(fā)現(xiàn)頁(yè)面生效了，別忘了修改在組件中引用樣式的后綴。

當(dāng)然，這只是修改了開發(fā)環(huán)境的配置，還需要修改生產(chǎn)環(huán)境

• 修改webpack.config.prod.js同樣在 rules 字段中添加以下代碼

{
  test : /\.scss$/,
  use  : ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: require.resolve('style-loader'),
        use: [
          {
            loader: require.resolve('css-loader'), // translates CSS into CommonJS
            options: {
              sourceMap     : true,
              minimize      : true,
              importLoaders : 3,
            },
          },
          require.resolve('resolve-url-loader'), // resolves relative paths in url() statements based on the original source file
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('sass-loader'),  // compiles Sass to CSS,
            options: {
              includePaths: [`${paths.appNodeModules}/normalize-scss/sass`],
            },
          },
        ]
      },
      extractTextPluginOptions
    )
  ),
},

引入U(xiǎn)I庫(kù)

筆者使用的是螞蟻金服的 antd UI組件庫(kù)，文檔全，使用簡(jiǎn)單，組件也能滿足基本的需求。官方文檔也有具體的相關(guān)配置說(shuō)明。

安裝組件

npm install antd --save

or

yarn add antd

按需加載

使用 babel-plugin-import

npm install babel-plugin-import --save

修改 webpack 文件

在 rules 中的 babel 規(guī)則中的 options 中添加以下代碼

plugins: [
   ['import', { libraryName: 'antd', style: true }],
],

引入樣式

使用 less 加載

npm install less@2.7.2 less-loader --save

注意： less 版本不能高于 3.0.0 至于為什么官方issue

修改 webpack 文件

{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    {
      loader: require.resolve('less-loader'),
      options: {
        modifyVars: { '@primary-color': '#1890ff' },
      },
    },
  ],
},

其中 @primary-color 表示主題色，官方也有推薦配置主題色的說(shuō)明。

在頁(yè)面中使用組件

import { Button } from 'antd';
...
<div>
  <Button type="primary">button</Button>
</div>
...

此時(shí)頁(yè)面上就會(huì)顯示 Button 組件

配置 eslint

為了是代碼保持統(tǒng)一風(fēng)格，可以使用工具 eslit 來(lái)檢查代碼的規(guī)范性。筆者是使用 airbnb 的代碼風(fēng)格，當(dāng)然你也可以自定義屬于自己的code-style。

安裝需要的包

npm install eslint-config-airbnb --save

注意：
也許使用 create-react-app 初始化出來(lái)的項(xiàng)目，配置 eslint 以及安裝了各種 eslint 依賴，這時(shí)啟動(dòng)項(xiàng)目發(fā)現(xiàn)報(bào)以下錯(cuò)誤，那么你可能需要更改包的版本，筆者也是嘗試了多次才成功的。

eslint.png

引入配置

在項(xiàng)目的根目錄下創(chuàng)建 .eslintrc 文件

{
  "env": {
    "browser": true,
    "jest": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "import"
  ],
  "extends": "airbnb",
  "rules": {}
}

其中 rules 可以覆蓋 airbnb 的規(guī)則，關(guān)于如何編寫 eslint 規(guī)則可以查詢 eslint 官方文檔

也可以在根目錄下創(chuàng)建 .eslintignore 來(lái)對(duì)某些文件不做 eslint 校驗(yàn)

commit 代碼時(shí)使用 eslint 檢查

安裝依賴

npm install lint-staged husky --save

修改 package.json 文件

"scripts": {
  "precommit": "lint-staged",
  "start": "react-scripts start",
  "build": "react-scripts build",
...
"lint-staged": {
  "src/**/*.{js,jsx}": [
    "eslint --fix",
    "git add"
  ]
}

引入路由系統(tǒng)

設(shè)置文件別名

現(xiàn)在，我們需要更改 src 目錄的文件結(jié)構(gòu)，以便于更符合實(shí)際項(xiàng)目場(chǎng)景，我們可能需要 components 文件夾來(lái)存放組件，routes 文件夾來(lái)存放頁(yè)面，styles 文件夾來(lái)存放樣式，utils 文件夾來(lái)存放工具類函數(shù)等。

既然有了文件夾來(lái)區(qū)分不同的功能，為了方便文件的相互，我們可以利用 webpack 來(lái)設(shè)置別名。

• 修改 config 文件夾下的 paths 文件

module.exports = {
  ...
  appSrc: resolveApp('src'),
  appStyles: resolveApp('src/styles'),
  appRoutes: resolveApp('src/routes'),
  appComponents: resolveApp('src/components'),
  appUtils: resolveApp('src/utils'),
  ...

• 修改 webpack 配置項(xiàng) alias

alias: {
  styles: paths.appStyles,
  routes: paths.appRoutes,
  components: paths.appComponents,
  utils: paths.appUtils,
  ...

安裝路由組件 react-router

npm install react-router react-router-dom --save

• 在 routes 文件夾中新建 index.jsx 頁(yè)面，以及新建兩個(gè)頁(yè)面組件分別是 home.jsx 和 about.jsxindex.jsx

import React from 'react'
import { Route, Redirect } from 'react-router'
import { HashRouter, Switch } from 'react-router-dom'
import Home from 'routes/home'
import About from 'routes/about'
const Routes = () => (
  <HashRouter>
    <div>
      <Route exact path="/" render={() => <Redirect to="/home" />} />
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </HashRouter>
)
const App = () => (
  <Routes />
)
export default App

about.jsx

import React from 'react'
import { Link } from 'react-router-dom'
const About = () => (
  <div>
    <p>this is about page</p>
    <Link to="/home">goto Home</Link>
  </div>
)
export default About

home.jsx

import React from 'react'
import { Link } from 'react-router-dom'
const Home = () => (
  <div>
    <p>this is home page</p>
    <Link to="/about">goto About</Link>
  </div>
)
export default Home

• 修改 src 文件夾下的 index

import React from 'react'
import ReactDOM from 'react-dom'
import App from 'routes/index'
import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(<App />, document.getElementById('root'))

添加數(shù)據(jù)管理

react 本身就有自己的狀態(tài)管理 state，但隨著項(xiàng)目的復(fù)雜性頁(yè)面的增多其維護(hù)性不是那么友好，于是出現(xiàn)了針對(duì) react 的數(shù)據(jù)狀態(tài)管理，如 flux、redux、mobx 等等。下面我們就講解項(xiàng)目如何配置 mobx。

安裝依賴

npm install mobx mobx-react --save

修改文件

• 新建文件夾 stores在 src 目錄下新建一個(gè)文件夾 stores，創(chuàng)建 index.js 文件

const store = {}
export default store

• 修改 webpack 文件

在 webpack 文件中設(shè)置別名，方面引用，當(dāng)然別忘了修改 paths 文件來(lái)設(shè)置路徑

alias: {
  styles: paths.appStyles,
  routes: paths.appRoutes,
  components: paths.appComponents,
  stores: appStores,
...

• 修改入口文件

修改 routes 下的 index.js

...
import { Provider } from 'mobx-react'
import stores from 'stores'
...
const App = () => (
  <Provider {...stores}>
    <Routes />
  </Provider>
)
...

開始使用

• 使用 mobx 你還需要安裝 babel 的裝飾器插件，以及修改 babel 的配置

npm install babel-plugin-transform-decorators-legacy --save

修改 package.json 文件中的 babel 參數(shù)，或者在根目錄下新建一個(gè) .babelrc 文件

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "babel-plugin-transform-decorators-legacy"
  ]
...

現(xiàn)在，你可以在你的組件中使用 mobx 來(lái)管理你的狀態(tài)了。

關(guān)于 mobx 的使用，你可以訪問(wèn)官方文檔

添加 mobx 開發(fā)工具

• 安裝依賴

npm install mobx-react-devtools

• 修改入口文件 routes 下的 index.js

...
import DevTools from 'mobx-react-devtools'
....
const App = () => (
  <Fragment>
    <Provider {...stores}>
      <Routes />
    </Provider>
    <DevTools />
  </Fragment>
)

當(dāng)然，你也可以設(shè)置環(huán)境變量，只在開發(fā)中打開該工具

{
  process.env.NODE_ENV === 'development' ? (
    <DevTools />
  ) : null
}

到此，相信大家對(duì)“create-react-app全家桶router mobx全局安裝配置的方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！