新建一個項目

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上了，可以自己查看

總結

以上是生活随笔為你收集整理的create-react-app 配置scss,ant-design，装饰器，代理，node支持最新语法，express es6 后端，链接mongodb...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。