前言
零零散散也做過不少專案了，有基於jquery、bootstrap的，有基於jquery、easyui的，有基於react的。
專案多了總會有一些自己感悟和經驗，所以分享出來，肯定有不對和不合適的地方，歡迎批評指正。
好了，廢話不多說了，讓我們從零開始，一步一步的折騰吧。
概述
我暫時分成5各部分來介紹：
- 開發環境建立
- 配置eslint，建立專案檔案和目錄結構
- mock本地資料模擬介面
- 釋出環境webpack配置
- 單元測試
開發
一、初始化專案
- 建立專案檔案，就叫
react-architecture吧。 - 初始化git
git init - 初始化npm
npm init - 當然不能一口氣的只講配置，so 我們簡單的建立一些檔案和目錄，跑起來看一看效果。目錄結構如下：
├── src
│ ├── index.html
│ └── index.js
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
複製程式碼我們先來配置下webpack，暫時先不管其他。
二、webpack.config.js 的配置
- 安裝一些依賴: 為了webpack執行，需要安裝（我用了webpack3+）
npm install -D webpack@3 webpack-dev-server@2 html-webpack-plugin
複製程式碼react，需要安裝
npm install -S react react-dom react-router-dom
複製程式碼處理less，需要安裝
npm install -D css-loader style-loader less less-loader
複製程式碼處理圖片和字型檔案，需要安裝
npm install -D url-loader file-loader
複製程式碼為了支援高階語法-babel，需要安裝
npm install -S babel-polyfill // 實際生產環境也會用到
npm install -D babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-2
複製程式碼- webpack.config.js 配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry:{
main:['babel-polyfill','./src/index.js'],
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test: /\.(woff|eot|ttf|svg|png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: '1024'
}
},
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: '1024'
}
},
]
},
{
test: /\.(css|less)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
'less-loader'
]
},
{
test:/\.(js|jsx)$/,
use:"babel-loader",
exclude:/node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'}),
],
devServer:{
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000,
proxy: {
"/api": {
target: "http://127.0.0.1:3000/",
pathRewrite: {"^/api" : ""}
}
}
}
}
複製程式碼- babel的配置
建立.babelrc檔案
{
"presets": [
["env",{
"targets": {
"browsers": ["IE >= 9"]
},
"useBuiltIns": true
}],
"react",
"stage-2"
]
}
複製程式碼- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react-architecture</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
複製程式碼- index.js
萬變不離 Hello World~
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('root')
)
複製程式碼- 在package.json的 scripts 新增啟動命令
"start": "webpack-dev-server --open"
複製程式碼- 命令列 執行
npm start就可以看效果了
總結
本章主要做了3件事：
- 建立簡單的專案檔案
- 安裝所需要依賴
- webpack、babel 開發環境的配置， Hello World 基本程式碼的編寫
下篇文章將介紹 配置eslint 目錄架構