摘要:环境搭建从零开始搭建开发环境引入安装依赖新建修改引入并支持安装依赖打包时将样式模块化,我们可以通过或引入样式,并且相互不冲突。修改,引入创建使用语法报错修改引入状态管理使用装饰器语法修改修改源码
环境搭建
1.从零开始搭建webpack+react开发环境
2.引入Typescript
安装依赖
npm i -S @types/react @types/react-dom
npm i -D typescript awesome-typescript-loader source-map-loader
新建tsconfig.json
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] }
修改webpack.config.js
// webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); module.exports = { entry: { index:"./src/index.js", }, output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") }, devtool: "source-map", // Add ".ts" and ".tsx" as resolvable extensions. resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] }, module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"] }, { test: /.(png|svg|jpg|gif)$/, use: ["url-loader"] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: ["url-loader"] }, { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, // All files with a ".ts" or ".tsx" extension will be handled by "awesome-typescript-loader". { test: /.tsx?$/, loader: "awesome-typescript-loader" }, ] }, plugins: [ new HtmlWebpackPlugin({ title: "production", template: "./index.html" }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: "./dist", hot: true }, };
3.引入less并支持import less modules
安装依赖
npm i -D less less-loader
npm i -D typings-for-css-modules-loader
tips: typings-for-css-modules-loader
打包时将样式模块化,我们可以通过import或require引入样式,并且相互不冲突。
//demo.less -> demo.less.d.ts //.demo{color:red;} -> export const demo: string; import * as styles from "demo.less"
修改webpack.config.js
// webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); module.exports = { entry: { index:"./src/index.js", }, output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") }, devtool: "source-map", //add .less resolve: { extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"] }, module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"] }, //import less modules,name:demo__demo___hash { test: /.less/, use: [ "style-loader", "typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&namedExport&camelCase&less!less-loader" ] }, { test: /.(png|svg|jpg|gif)$/, use: ["url-loader"] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: ["url-loader"] }, { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.tsx?$/, loader: "awesome-typescript-loader" }, ] }, plugins: [ new HtmlWebpackPlugin({ title: "production", template: "./index.html" }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: "./dist", hot: true }, };
4.引入react-routerv4
npm i -S react-router-dom
创建history
import { createHashHistory } from "history"; export default createHashHistory();
使用
import React from "react"; import ReactDom from "react-dom"; import * as styles from "./index.less"; import history from "./helpers/history"; import {Router, Route, Switch, Redirect, Link} from "react-router-dom"; import Hello from "./router/Hello"; import TodoList from "./router/TodoList"; const PrivateRoute = ({ component: Component , ...rest}) => { return (( )}/> ); } ReactDom.render( , document.getElementById("root") );
- Homes
- TodoList
{/* */}
...ES7语法报错
npm i -S babel-preset-stage-2
修改.babelrc
{ "presets": ["es2015", "react", "stage-2"], }
5.引入mobx状态管理
npm i -S mobx mobx-react
使用装饰器语法
修改tsconfig.json
"compilerOptions": { "target":"es2017", //fix mobx.d.ts error "experimentalDecorators": true, "allowJs": true }
npm i -D babel-plugin-transform-decorators-legacy
修改.babelrc
{ "presets": ["es2015", "react", "stage-2"], "plugins": ["transform-decorators-legacy"] }源码
Github
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95076.html
摘要:不断更新笔记效果有待进一步完善搭建一个基于的多人功能登录注册上传头像发表博文发表留言参考自前端部分以的脚手架搭起的全家桶后端采用开发环境开发环境要求以上目录结构如何运行后端默认配置在中请确保本地端口默认可用发布到目录中默 Full-stack-blog(不断更新笔记) 效果Demo(有待进一步完善)搭建一个基于Koa2的多人blog功能(登录注册上传头像,发表博文,发表留言)参考自ht...
react-demo(娃哈哈商城) Github地址:https://github.com/Aemple/rea... 欢迎Star 技术栈 前端
摘要:项目地址下载完项目然后即可基于的项目,主要是为了学习实战。数据都是固定的,从饿了么接口临时抓的,模拟了一个的异步数据延迟,感谢饿了么。详细信息可以看上面的官方文档,我这里就简单说一下我这个项目的应用。 react-ele-webapp 项目地址 :https://github.com/kliuj/reac... run 下载完项目npm install然后npm run dev 即可 ...
摘要:基于全家桶写作新闻一体综合应用的实践总结在线地址大家伙儿们,又见面了。参照但不可否认非常符合的思想,都在处理大规模数据时彰显优势。最好的办法是使用部署环境。细致的拆分,解耦性更好,以为单位进行修改时,大大降低误伤率的同时,隔离无关的信息。 ?CoderPad-基于React全家桶写作/新闻一体综合应用的实践总结 showImg(https://segmentfault.com/img/...
阅读 2619·2021-11-24 09:39
阅读 1609·2021-11-24 09:38
阅读 594·2021-11-22 14:44
阅读 1833·2021-11-18 10:02
阅读 2491·2021-11-18 10:02
阅读 1131·2021-10-14 09:43
阅读 4183·2021-09-29 09:35
阅读 459·2021-07-30 15:30