React + Typescript + Webpack 開發環境配置
Typescript 給 React 帶來很多好處：在組件頭部以 interface 方式定義 props 、 state ，在編譯中發現問題，使用VSCode等工具實現實時類型校驗等，且配置也是非常簡單，步驟如下。
文件目錄
.
├── build # 前端配置文件
│ ├── index.html
│ ├── webpack.config.js
├── app # 前端目錄
├── .gitignore
├── package.json
├── tsconfig.json
└── tslint.json
配置流程
創建項目
mkdir my-project && cd my-project
npm init
安裝依賴
npm i -g webpack webpack-dev-server
npm i --save-dev react react-dom @types/react @types/react-dom
npm i --save ts-loader source-map-loader
npm link --save webpack webpack-dev-server
配置 webpack
/* build/webpack.config.js */
const config = {
entry: './Yoda/index.tsx',
output: {
filename: 'app.bundle.js',
path: './public',
publicPath: '/assets'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'ts-loader'
}
],
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
devtool: 'eval'
}
module.exports = config
配置 tsconfig
/* tsconfig.json */
{
"compilerOptions": {
"outDir": "./public/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"files": [
"./app/index.tsx"
]
}
至此，基本配置已經完成，后面創建好一個入口頁面和 entry 文件就可以跑起來了：
/* build/index.html */
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Hello world</title>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
</head>
<body>
<div id="app"></div>
<script src="assets/app.bundle.js"></script>
</body>
</html>
/* app/index.tsx */
import * as React from 'react'
import { render } from 'react-dom'
interface IAppProps {}
interface IAppState {}
class App extends React.Component<IAppProps, IAppState> {
public render(): JSX.Element {
return (
<div>
Hello world
</div>
)
}
}
render(<App />, document.getElementById('app'))
啟動項目
webpack-dev-server --inline --config build/webpack.config.dev.js --content-base build
出來吧神龍
簡單的說明
Webpack 配置
Webpack配置其實是一件很簡單的事情，這也是他具備強大競爭力的重要因素。
從配置文件中可以看出，里面無非就是 entry 、 output 和 loader ，如果需要編譯CSS，在 loader 里面加一個即可：
npm i --save-dev style-loader css-loader
/* build/webpack.config.js */
const config = {
// ...
module: {
loaders: [
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
],
// ...
},
// ...
}
項目啟動
項目啟動的命令過長，放進 package.json 的 scripts 就好了：
/* package.json */
{
"scripts": {
"dev": "webpack-dev-server --inline --config build/webpack.config.dev.js --content-base build",
},
}
再執行以下命令試試：
npm run dev
tslint
在開發中如果有個約束代碼的工具能夠讓代碼更加優雅，以前用的是 eslint ，如果用 .tsx 就不能生效了，這里推薦使用 tslint ：
npm i -g tslint
cd my-project
tslint init
這樣會在項目文件中創建一個現成的 tslint 配置文件： tslint.json ，個性化方案可以自行設置。
參考
webpack 新官網 webpack dev server tsconfig.json 配置文檔 style-loader tslint
來自：https://segmentfault.com/a/1190000007631069
本文由用戶 BlancaCrisp 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！