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

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 復(fù)制代碼

暴露配置文件

# 暴露配置文件，輸入yes就好 npm eject 復(fù)制代碼

下載依賴

# 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源碼鏡像，一些二進(jìn)制包編譯時(shí)用 --sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個(gè)才是node-sass鏡像 # ant-design npm install antd --save # 按需加載的依賴 npm install babel-plugin-import --save 復(fù)制代碼

配置webpack參數(shù)

scss

在config 里面的webpack.config.dev.js和webpack.config.prod.js里面，前面一個(gè)是開發(fā)的配置文件，后面的是生產(chǎn)時(shí)的配置文件

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

之后你隨便新建一個(gè)a.scss ，import "路徑/a.scss"就可以了

缺點(diǎn)就是css代碼會是全局的，一個(gè)人開發(fā)還好，多人的話，css命名沖突就很難受了，css-moudle是一種解決方案，但是我不怎么喜歡，我個(gè)人推薦可以用下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"]},//設(shè)置代理,應(yīng)為前端開啟了一個(gè)服務(wù)器，后端又開啟了一個(gè)服務(wù)器，導(dǎo)致跨域的問題，設(shè)置代理能解決這個(gè)問題"proxy": "http://localhost:8888", 復(fù)制代碼

之后就ok了。你引入一個(gè)ant的組件試試就知道了

結(jié)果

# 導(dǎo)入 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; # 有人說為什么不用導(dǎo)入css,應(yīng)為前面已經(jīng)配置了按需加載 復(fù)制代碼

如果我又想用antd的主題怎么辦

這里就給一個(gè)官方的解決方案

傳送門

注意

修改配置文件后要重新npm start一下的

• 若配置裝飾器后，發(fā)現(xiàn) vscode 有紅色波浪線，解決方法

# 新建一個(gè)tsconfig.json，內(nèi)容如下 {"compilerOptions": {"experimentalDecorators": true,"allowJs": true} } 復(fù)制代碼

鏈接mongodb，后端node

夢想還是要有的，萬一實(shí)現(xiàn)了呢

# 在根目錄新建一個(gè)server cd server # init后就會生成一個(gè)package.json，記錄你每次安裝的包 npm init # 為什么把模塊裝在server里面，裝在外面的package.json不好嗎，可以啊，不過我喜歡分開 npm i bluebird express mongoose nodemon --save mkdir server.js 復(fù)制代碼

準(zhǔn)備啟動(dòng)后端了，鏈接mongodb

const express = require('express'); const mongoose = require('mongoose')const app = express();app.use('/', function (req, res) {return res.json('hello world') }) // mongoose的Promise已經(jīng)廢棄了，這里就用下bluebird mongoose.Promise = require('bluebird');try {mongoose.connect('mongodb://localhost/test', {// 不加參數(shù)會報(bào)警告// 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("服務(wù)開啟在8888"); }) 復(fù)制代碼

前面代理的端口要和后端啟動(dòng)的端口一致的

修改package.json

# nodemon 就是你不用每次再去手動(dòng)node server.js了，他會自動(dòng)的幫你的（在外層的package.json）"scripts": {"server": "nodemon server/server.js"}, 復(fù)制代碼

express怎么不是es6的語法?

# 那就實(shí)現(xiàn)一下 # 用babel-cli npm i bebel-cli --save 修改scripts命令"server": "NODE_ENV=test nodemon --exec babel-node server/server.js"# 不指定babel-node的話，默認(rèn)是node# 之后你把里面的require改成import是不會報(bào)錯(cuò)的 復(fù)制代碼

mongodb 存儲配置

• 默認(rèn)你已經(jīng)安裝好mongodb,配好mongodb的環(huán)境變量，不配也沒關(guān)系，多打幾個(gè)路徑而已
• 在某一盤符下新建一個(gè)test(名字隨意)，里面新建data,etc,logs三個(gè)文件夾
• data是存放數(shù)據(jù)的，etc是配置文件，logs是日志
• 在etc下新建mongo.conf

# 內(nèi)容范例 #數(shù)據(jù)庫路徑 (你自己的路徑) dbpath=/home/skl/Desktop/test/data # 日志輸出文件路徑 logpath=/home/skl/Desktop/test/logs/mongodb.log # 錯(cuò)誤日志采用追加模式，配置這個(gè)選項(xiàng)后mongodb的日志文件會追加到現(xiàn)有的日志文件，而不是重新創(chuàng)建一個(gè)文件 logappend=true# 過濾一些無用的日志 quiet=false# 啟動(dòng)日志文件，默認(rèn)啟動(dòng) journal=true# 端口號，默認(rèn)是27017 port=27018 復(fù)制代碼

• 需要注意的是：linux和window的文件分隔符是不一樣的，pwd打一下就知道了
• 在etc文件里面運(yùn)行 mongod --config mongo.conf （指定配置文件）

啟動(dòng)server.js前先鏈接數(shù)據(jù)庫 ，在etc文件里面運(yùn)行 mongod --config mongo.conf （指定配置文件）

啟動(dòng)

cd server npm start 復(fù)制代碼

訪問localhost:8888，會出現(xiàn)

傳送門 項(xiàng)目放github上了，可以自己查看

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。