新建一个项目
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm i
- npm start
- # 或者, npm 5.1 版本以上自带 npx, 以下官方推荐
- npx create-react-app my-app
- cd my-app
- npm start
暴露配置文件
- # 暴露配置文件, 输入 yes 就好
- npm eject
下载依赖
- # sCSS 依赖
- npm install sass-loader node-sass --save-dev
- # 如果 node-sass 下载不下来的话, 即 node-sass 安装失败使用:
- npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
- # 说明
--registry=https://registry.npm.taobao.org 淘宝 npm 包镜像
--disturl=https://npm.taobao.org/dist 淘宝 node 源码镜像, 一些二进制包编译时用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是 node-sass 镜像
- # ant-design
- npm install antd --save
- # 按需加载的依赖
- npm install babel-plugin-import --save
配置 webpack 参数
scss
在 config 里面的 webpack.config.dev.js 和 webpack.config.prod.js 里面, 前面一个是开发的配置文件, 后面的是生产时的配置文件
大约 160 行左右
# 第一处是:
test: /\.css$/ 变成 test: /\.s?css$/
- # 第二处是:
- {loader: require.resolve('sass-loader')}
之后你随便新建一个 a.scss ,import "路径 / a.scss" 就可以了
缺点就是 css 代码会是全局的, 一个人开发还好, 多人的话, css 命名冲突就很难受了, css-moudle 是一种解决方案, 但是我不怎么喜欢, 我个人推荐可以用下 style-component
css-moudle 阮一峰
- style-component
- ant-design
- # 修改 babel 配置, 在 package.json 里面
- # 1. 按需加载, 让 nodejs 支持最新的语法, 装饰器
- # package.json 里面不能写注释, 记得删掉
- "babel": {
- "presets": [
- "react-app",
- [
- "env",
- {
- "targets": {
- "node": true
- }
- }
- ]
- ],
- // 这边是按需加载 ant-design 的 css
- "plugins": [
- [
- "import",
- {
- "libraryName": "antd",
- "libraryDirectory": "es",
- "style": "css"
- }
- ],
- // 装饰器
- "transform-decorators-legacy"
- ]
- },
- // 设置代理, 应为前端开启了一个服务器, 后端又开启了一个服务器, 导致跨域的问题, 设置代理能解决这个问题
- "proxy": "http://localhost:8888",
之后就 ok 了你引入一个 ant 的组件试试就知道了
结果
- # 导入
- import { Button } from 'antd';
- import React from 'react'
- import "./msgCircle.scss";
- class MsgCircle extends React.Component {
- render() {
- return (
- <div className="msg-circle">
- <Button type="primary">Primary</Button>
- </div>
- )
- }
- }
- export default MsgCircle;
- # 有人说为什么不用导入 css, 应为前面已经配置了按需加载
注意
修改配置文件后要重新 npm start 一下的
若配置装饰器后, 发现 vscode 有红色波浪线, 解决方法
- # 新建一个 tsconfig.json, 内容如下
- {
- "compilerOptions": {
- "experimentalDecorators": true,
- "allowJs": true
- }
- }
来源: https://juejin.im/post/5abb776bf265da23793c37ae