Skip to content

Commit 09d84c5

Browse files
aasailanaasailan
committed
添加build配置，添加node代理脚本
1 parent 78121e0 commit 09d84c5

File tree

10 files changed

+240
-56
lines changed

10 files changed

+240
-56
lines changed

‎.vscode/launch.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "debug proxy",
11+
"program": "${workspaceFolder}\\node-proxy\\index.js",
12+
}
13+
]
14+
}

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
1、该项目是[vue-demo-kugou](https://github.com/lavyun/vue-demo-kugou)的react重构版本。是使用react仿写的酷狗音乐webapp。
55
2、本项目技术栈为 react + typescript + redux + scss + css-modules
66

7+
## 在线预览
8+
[在线预览点击此处](http://47.107.227.113:3001)，请使用手机浏览器或手机模式打开。
9+
710
## 项目截图
811
<img src="./preview/index.png">
912
<img src="./preview/play.png">
@@ -23,10 +26,10 @@ declare namespace React {
2326

2427
## 注意事项
2528
1、关于修改react的type文件：本项目使用了[babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)作为css局部化的解决方案，使用时需要在jsx元素上使用styleName属性。react的jsx元素type声明文件中并没有styleName属性的声明，所以做声明合并添加styleName属性声明。如果可以能在外部type文件做声明合并更好，但是我尝试后失败了。有解决过这个问题的同学请开个issue帮忙解决，谢谢。
29+
2、生产环境编译（npm run build）需要先配置 src/api/index.ts 文件中的PRO_API_HOST变量
2630

2731
## TODO
28-
1、修改生产编译配置，提供生产环境编译打包（目前只能npm run start）
29-
2、部署在Docker，提供在线预览
32+
1、对所有列表加上分页加载。
3033

3134
## 本人的其他项目，欢迎star ^^
3235
* [mpvue-fresh-weather](https://github.com/aasailan/mpvue-fresh-weather)：基于typescript + mpvue 的天气类型微信小程序

‎config/webpack.config.dev.js

+2-19
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ module.exports = {
151151
},
152152
},
153153

154-
// Compile .tsx?
154+
// Compile .tsx
155155
{
156156
test: /\.(ts|tsx)$/,
157157
include: paths.appSrc,
@@ -213,24 +213,7 @@ module.exports = {
213213
},
214214
{
215215
// loader: require.resolve('postcss-loader'),
216-
loader: 'postcss-loader',
217-
// options: {
218-
// // Necessary for external CSS imports to work
219-
// // https://github.com/facebookincubator/create-react-app/issues/2677
220-
// ident: 'postcss',
221-
// plugins: () => [
222-
// require('postcss-flexbugs-fixes'),
223-
// autoprefixer({
224-
// browsers: [
225-
// "Android >= 4",
226-
// "IOS >= 7",
227-
// "> 1%",
228-
// "last 2 versions"
229-
// ],
230-
// flexbox: 'no-2009',
231-
// }),
232-
// ],
233-
// },
216+
loader: 'postcss-loader'
234217
},
235218
{
236219
loader: require.resolve('sass-loader'),

‎config/webpack.config.prod.js

+52-20
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ module.exports = {
107107
// Support React Native Web
108108
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
109109
'react-native': 'react-native-web',
110+
'@': path.resolve('src')
110111
},
111112
plugins: [
112113
// Prevents users from importing files from outside of src/ (or node_modules/).
@@ -160,7 +161,36 @@ module.exports = {
160161
include: paths.appSrc,
161162
use: [
162163
{
163-
loader: require.resolve('ts-loader'),
164+
loader: 'babel-loader',
165+
options: {
166+
plugins: [
167+
'@babel/plugin-syntax-dynamic-import',
168+
'@babel/transform-react-jsx', // ts-loader不再处理jsx，所以需要babel处理
169+
[
170+
'react-css-modules', // babel插件处理css-modules
171+
{
172+
handleMissingStyleName: 'warn',
173+
generateScopedName: '[name]__[local]',
174+
context: paths.appSrc,
175+
exclude: 'node_modules',
176+
webpackHotModuleReloading: true, // 允许css热更替
177+
filetypes: {
178+
".scss": {
179+
// 使用postcss-scss处理scss语法
180+
syntax: "postcss-scss",
181+
plugins: [
182+
// 使用postcss-nested插件处理scss的嵌套语法
183+
"postcss-nested"
184+
]
185+
}
186+
}
187+
}
188+
]
189+
]
190+
},
191+
},
192+
{
193+
loader: require.resolve('ts-loader'), // 在tsconfig.json里面设置 jsx: preserve，让typescript不处理jxs
164194
options: {
165195
// disable type checker - we will use it in fork plugin
166196
transpileOnly: true,
@@ -169,6 +199,20 @@ module.exports = {
169199
},
170200
],
171201
},
202+
// {
203+
// test: /\.(ts|tsx)$/,
204+
// include: paths.appSrc,
205+
// use: [
206+
// {
207+
// loader: require.resolve('ts-loader'),
208+
// options: {
209+
// // disable type checker - we will use it in fork plugin
210+
// transpileOnly: true,
211+
// configFile: paths.appTsProdConfig,
212+
// },
213+
// },
214+
// ],
215+
// },
172216
// The notation here is somewhat confusing.
173217
// "postcss" loader applies autoprefixer to our CSS.
174218
// "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -182,7 +226,7 @@ module.exports = {
182226
// use the "style" loader inside the async code so CSS from them won't be
183227
// in the main CSS file.
184228
{
185-
test: /\.css$/,
229+
test: /\.css|scss|sass$/,
186230
loader: ExtractTextPlugin.extract(
187231
Object.assign(
188232
{
@@ -196,30 +240,18 @@ module.exports = {
196240
{
197241
loader: require.resolve('css-loader'),
198242
options: {
243+
modules: true,
199244
importLoaders: 1,
200245
minimize: true,
201246
sourceMap: shouldUseSourceMap,
247+
localIdentName: '[name]__[local]'
202248
},
203249
},
204250
{
205-
loader: require.resolve('postcss-loader'),
206-
options: {
207-
// Necessary for external CSS imports to work
208-
// https://github.com/facebookincubator/create-react-app/issues/2677
209-
ident: 'postcss',
210-
plugins: () => [
211-
require('postcss-flexbugs-fixes'),
212-
autoprefixer({
213-
browsers: [
214-
'>1%',
215-
'last 4 versions',
216-
'Firefox ESR',
217-
'not ie < 9', // React doesn't support IE8 anyway
218-
],
219-
flexbox: 'no-2009',
220-
}),
221-
],
222-
},
251+
loader: require.resolve('postcss-loader')
252+
},
253+
{
254+
loader: require.resolve('sass-loader'),
223255
},
224256
],
225257
},

‎node-proxy/index.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* @Author: qiao
3+
* @Date: 2018-12-21 10:02:31
4+
* @Last Modified by: qiao
5+
* @Last Modified time: 2018-12-21 16:46:59
6+
* 代理转发
7+
*/
8+
9+
const express = require('express');
10+
// let request = require('superagent')
11+
const proxy = require('http-proxy-middleware');
12+
const path = require('path');
13+
14+
const proxyOptions = {
15+
'/proxy': {
16+
target: 'http://m.kugou.com',
17+
changeOrigin: true,
18+
pathRewrite: {
19+
'^/proxy': ''
20+
}
21+
},
22+
'/aproxy': {
23+
target: 'http://mobilecdn.kugou.com',
24+
changeOrigin: true,
25+
pathRewrite: {
26+
'^/aproxy': ''
27+
}
28+
},
29+
'/bproxy': {
30+
target: 'http://www.kugou.com',
31+
changeOrigin: true,
32+
pathRewrite: {
33+
'^/bproxy': ''
34+
}
35+
}
36+
};
37+
38+
39+
const app = express();
40+
41+
// static file
42+
app.use(express.static(path.resolve('./build')));
43+
44+
/**
45+
* CORS support.
46+
*/
47+
// app.all('*', function (req, res, next) {
48+
// if (!req.get('Origin')) {
49+
// return next();
50+
// }
51+
// // use "*" here to accept any origin
52+
// res.set('Access-Control-Allow-Origin', 'http://localhost:3000')
53+
// res.set('Access-Control-Allow-Methods', 'GET')
54+
// res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')
55+
// res.set('Access-Control-Allow-Credentials', true);
56+
// if (req.method === 'OPTIONS') {
57+
// return res.send(200);
58+
// }
59+
// next()
60+
// })
61+
62+
// 手动编写代理
63+
// app.get('/proxy', (req, res) => {
64+
// let sreq = request.get('http://m.kugou.com' + req.originalUrl)
65+
// sreq.pipe(res)
66+
// sreq.on('end', function (error, res) {
67+
// // console.log(`>>> fetch ${requestItem} succeed`)
68+
// })
69+
// });
70+
71+
Object.keys(proxyOptions).forEach(key => {
72+
app.use(key, proxy(proxyOptions[key]));
73+
});
74+
75+
// 404
76+
app.use((req, res) => {
77+
res.sendfile('./build/index.html');
78+
});
79+
80+
app.listen(3001);

‎package-lock.json

+67-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,16 @@
7272
"@types/react-redux": "^6.0.10",
7373
"babel-loader": "^8.0.4",
7474
"babel-plugin-react-css-modules": "^4.0.0",
75-
"http-proxy-middleware": "^0.19.0",
75+
"express": "^4.16.4",
76+
"http-proxy-middleware": "^0.19.1",
7677
"node-sass": "^4.10.0",
7778
"postcss-import": "^12.0.1",
7879
"postcss-nested": "^4.1.0",
7980
"postcss-px-to-viewport": "0.0.3",
8081
"postcss-scss": "^2.0.0",
8182
"postcss-write-svg": "^3.0.1",
8283
"sass-loader": "^7.1.0",
84+
"superagent": "^4.0.0",
8385
"typescript": "^3.1.6"
8486
},
8587
"jest": {

0 commit comments

Comments
 (0)