create-react-app 配置scss,ant-design，裝飾器，代理，node支持最新語法，express es6 後端，連接mongodb

新建一個項目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm i
npm start
# 或者，npm 5.1版本以上自帶npx,如下官方推薦
npx create-react-app my-app
cd my-app
npm start
複製代碼

暴露配置文件

# 暴露配置文件，輸入yes就好
npm eject
複製代碼

下載依賴

# scss依賴
npm install sass-loader node-sass --save-dev
# 若是node-sass下載不下來的話，即node-sass安裝失敗使用：
 npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
# 說明
--registry=https://registry.npm.taobao.org 淘寶npm包鏡像
--disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像，一些二進制包編譯時用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個纔是node-sass鏡像
# ant-design
npm install antd --save
# 按需加載的依賴
npm install babel-plugin-import --save
複製代碼

配置webpack參數

scss

在config 裏面的webpack.config.dev.js和webpack.config.prod.js裏面，前面一個是開發的配置文件，後面的是生產時的配置文件

大約160行左右
# 第一處是： 
test: /\.css$/ 變成 test: /\.s?css$/  
# 第二處是： 
{loader: require.resolve('sass-loader')}
複製代碼

以後你隨便新建一個a.scss ，import "路徑/a.scss"就能夠了

缺點就是css代碼會是全局的，一我的開發還好，多人的話，css命名衝突就很難受了，css-moudle是一種解決方案，可是我不怎麼喜歡，我我的推薦能夠用下style-component

css-moudle阮一峯

style-component

ant-design

# 修改babel配置，在package.json裏面
# 裝飾器的包：npm i babel-plugin-transform-decorators-legacy --D
# 1.按需加載,讓nodejs支持最新的語法，裝飾器
# package.json裏面不能寫註釋，記得刪掉
 "babel": {
    "presets": [
      "react-app",
      [
        "env",
        {
          "targets": {
            "node": true
          }
        }
      ]
    ],
    // 這邊是按需加載ant-design的css
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ],
      // 裝飾器
      "transform-decorators-legacy"
    ]
  },
  //設置代理,應爲前端開啓了一個服務器，後端又開啓了一個服務器，致使跨域的問題，設置代理能解決這個問題
    "proxy": "http://localhost:8888",
複製代碼

以後就ok了。你引入一個ant的組件試試就知道了

結果

# 導入
import { Button } from 'antd';
import React from 'react'
import "./msgCircle.scss";
class MsgCircle extends React.Component {
  render() {
    return (
      <div className="msg-circle">
        <Button type="primary">Primary</Button>
      </div>
    )
  }
}
export default MsgCircle;
# 有人說爲何不用導入css,應爲前面已經配置了按需加載
複製代碼

若是我又想用antd的主題怎麼辦

這裏就給一個官方的解決方案

傳送門

注意

修改配置文件後要從新npm start一下的

• 若配置裝飾器後，發現 vscode 有紅色波浪線，解決方法

# 新建一個tsconfig.json，內容以下
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowJs": true
  }
}
複製代碼

連接mongodb，後端node

夢想仍是要有的，萬一實現了呢

# 在根目錄新建一個server 
cd server
# init後就會生成一個package.json，記錄你每次安裝的包
npm init 
# 爲何把模塊裝在server裏面，裝在外面的package.json很差嗎，能夠啊，不過我喜歡分開
npm i bluebird express mongoose nodemon --save 
mkdir server.js
複製代碼

準備啓動後端了，連接mongodb

const express = require('express');
const mongoose = require('mongoose')

const app = express();

app.use('/', function (req, res) {
  return res.json('hello world')
})
// mongoose的Promise已經廢棄了，這裏就用下bluebird
mongoose.Promise = require('bluebird');

try {
  mongoose.connect('mongodb://localhost/test', {
    // 不加參數會報警告
    // useMongoClient: true
  })
} catch (error) {
  console.log(error)
}
mongoose.connection
  .once('open', function () {
    console.log('mongoose connection')
  })
  .on('error', function (error) {
    throw error;
  })

app.listen(8888, () => {
  console.log("服務開啓在8888");
})
複製代碼

前面代理的端口要和後端啓動的端口一致的

修改package.json

# nodemon 就是你不用每次再去手動node server.js了，他會自動的幫你的（在外層的package.json）
  "scripts": {
    "server": "nodemon server/server.js"
  },
複製代碼

express怎麼不是es6的語法?

# 那就實現一下
# 用babel-cli 
npm i bebel-cli --save 
修改scripts命令
  "server": "NODE_ENV=test nodemon --exec babel-node server/server.js"
# 不指定babel-node的話，默認是node
# 以後你把裏面的require改爲import是不會報錯的
複製代碼

mongodb 存儲配置

• 默認你已經安裝好mongodb,配好mongodb的環境變量，不配也不要緊，多打幾個路徑而已
• 在某一盤符下新建一個test(名字隨意)，裏面新建data,etc,logs三個文件夾
• data是存放數據的，etc是配置文件，logs是日誌
• 在etc下新建mongo.conf

# 內容範例
# 數據庫路徑 (你本身的路徑)
dbpath=/home/skl/Desktop/test/data
# 日誌輸出文件路徑 
logpath=/home/skl/Desktop/test/logs/mongodb.log
# 錯誤日誌採用追加模式，配置這個選項後mongodb的日誌文件會追加到現有的日誌文件，而不是從新建立一個文件 
logappend=true
 # 過濾一些無用的日誌 
quiet=false
 # 啓動日誌文件，默認啓動 
journal=true
 # 端口號，默認是27017 
port=27018
複製代碼

• 須要注意的是：linux和window的文件分隔符是不同的，pwd打一下就知道了
• 在etc文件裏面運行 mongod --config mongo.conf （指定配置文件）

啓動server.js前先連接數據庫 ，在etc文件裏面運行 mongod --config mongo.conf （指定配置文件）

啓動

cd server
npm start
複製代碼

訪問localhost:8888，會出現

傳送門 項目放github上了，能夠本身查看