Typescript + react + webpack-ser
2018-01-10 本文已影响322人
茶艺瑶
之前有一个webpack 搭建的前端框架，但是由于业务上的问题，处理的我写了好多dom的操作，有点繁琐。加上人不足的情况下，更加麻烦了。
我在考虑新架构的时候在想使用vue还是react，但是最后我还是选择了react，至于之前爆发的一个关于react的开源协议问题，只要在中国使用那么问题就不大。
至于我为什么选择了react，而不使用vue。
其实也就是宋代升级，还有团队的协作性。在规范性上面React做得是比较强大的，还有就是社区问题，React的社区几乎是全球性，而vue给我的感觉是国内的火，不过要符合国内的需求的的话还是vue比较好，最怕的就是宋代升级的问题，比如vue1 和 vue2 的东西就不一样了。还有就是ng4的话也是一个比较不错的框架，但是适合做大项目罗，功能强大，你可以完全当一个后端程序来对待。
首先直接参考这个typescript官网中的react&webpack建立文件
https://www.tslang.cn/docs/handbook/react-&-webpack.html PS:请使用yarn 或者 cnpm 来操作
区别在于我们的index.html页面是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
下面我们就要添加webpack-dev-server 和 html-webpack-plugin
注意的是你必须要使用2.9.7的版本2.1.0有点bug问题
yarn add webpack-dev-server@2.9.7 html-webpack-plugin --dev
然后配置一下
webpack.config.js
在命令行输入 webpack-dev-server --open即可
前提是你要安装webpack-dev-server 是全局的
package.json添加scripts脚本操作
{
"name": "Dome3",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack build"
},
"dependencies": {
"@types/react": "^16.0.34",
"@types/react-dom": "^16.0.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^3.10.0"
},
"devDependencies": {
"awesome-typescript-loader": "^3.4.1",
"html-webpack-plugin": "^2.30.1",
"source-map-loader": "^0.2.3",
"typescript": "^2.6.2",
"webpack-dev-server": "2.9.7"
}
}
还有一点注意的是 以后使用jquery 什么之类，记得加一个 @types/jquery 这个依赖包
如果
图片.png
