React实践(一)——webpack4搭建开发环境
github
1、创建基本目录结构
npm init
- 创建src文件夹,再其中新建index.html
- 安装webpack依赖:
npm install webpack webpack-cli webpack-dev-server --save-dev
配置webpack,根目录下新建webpack.config.js:
module.exports = {mode: "development" // 生产环境为"production" }
配置命令行:
// package.json {..."script": {..."start": "webpack-dev-serve --hot" } }
利用html-webpack-plugin插件配置自动生成页面和注入打包后的js
npm install html-webpack-plugin --save-dev
webpack.config.js中配置:const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建插件示例对象 const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: "index.html" }) module.exports = {mode: "development",plugins: [htmlPlugin] }
2、搭建react开发环境
2.1、react配置
npm install react react-dom --save
- 使用babel转译jsx语法(一定要注意版本):
npm install babel-core babel-loader@7 babel-plugin-transform-runtime --save-dev
npm install babel-preset-env babel-preset-stage-0 babel-preset-react --save-dev
配置babel
// webpack.config.js module.exports = {...modules: {rules: [{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ } // 一定要添加exclude排除项]},resolve: {extensions: ["js", "jsx", "json"] // 配置导入模块的后缀名忽略alias: {"@": path.join(__dirname, '/src') // 配置src路径标识符}} }
根目录新建 .babelrc
{"presets": ["env", "stage-0", "react"],"plugins": ["transform-runtime"] }
2.2 配置sass-loader, css-loader以及其他loader:
cnpm install style-loader css-loader --save-dev
cnpm install sass-loader node-sass -save-dev
cnpm install url-loader file-loader --save-dev
注意在css-loader之后是可以加参数的,格式类似url的query格式:
- modules: 开启模块化(只针对类名和id,标签选择器依然是全局)
- localIdentName:
2.1 [path]: 相对于src的路径
2.2 [name]: 样式文件名
2.3 [local]: 样式原名
2.4 [hash:8]: 哈希值,8位限制长度
这里我们需要注意的是,我们有可能会用到第三方的样式表,而这时候如果是针对.css文件进行模块化的化,那就用不了了。所以,自己写的样式用sass,进行模块化处理,而全局或者第三方样式表用css。
// webpack.config.js
{...modules: {rules: [// 一定要添加exclude排除项{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },{ test: /\.css$/, use: ['style-loader', 'css-loader']}, // 字体文件打包处理配置{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader'},// 打包处理scss并模块化(只针对类名或id,标签选择器不会模块化){ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[local]-[hash:8]', 'sass-loader']}]},
}
2.3 配置eslint、stylelint
配置eslint
cnpm install eslint eslint-loader --save-dev
项目根目录新建.eslintrc.js:
module.exports = {"env": {"browser": true,"node": true},"parserOptions": {"ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {"jsx": true}},"rules": {// 允许开发环境使用debugger'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//禁止使用var'no-var': 2,// 强制操作符周围有空格'space-infix-ops': 2,// 语句块之前的空格(大括号之前有空格)'space-before-blocks': [2, "always"],// 强制在花括号中使用一致的空格'object-curly-spacing': [2, "always"],// 逗号之后必须有空格'comma-spacing': [2, { "before": false, "after": true }],// 对象字面量的键值之间的冒号后只有一个空格'key-spacing': [2, {"mode": "strict"}],// 约定以驼峰法命名"camelcase": [2, {"properties": "always"}]}
}
rules里的规则可与eslint官网自由配置,也可以用第三方配置好的插件。
webpack.config.js中的loader中配置:
{ enforce: 'pre', test: /\.js|jsx$/, use: 'eslint-loader', exclude: /node_modules/ },
配置stylelint
cnpm install stylelint stylelint-webpack-plugin --save-dev
项目根目录新建stylelint.config.js
module.exports = {defaultServerity: "warning",rules: {// 禁止使用important"declaration-no-important": true,// 选择器后的大括号前必须有一个空格"block-opening-brace-space-before": "always",// url需要加引号"function-url-quotes": "always",// 禁止空块"block-no-empty": true,// 取消小于1的小数的前导0"number-leading-zero": "never",// 禁止小数后的尾随0"number-no-trailing-zeros": true,// 函数逗号之后必须跟空格"function-comma-space-after": "always",// 函数逗号前不能加空格"function-comma-space-before": "never",// 声明的冒号后必须跟空格"declaration-colon-space-after": "always",// 声明的冒号前禁止空格"declaration-colon-space-before": "never",// 规定css类名格式(此处为短横线命名法,例如:.m-title)"selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"}
}
同样的道理,规则可以去stylelint官网配置。
webpack.config.js配置:
const StylelintWebpackPlugin = require('stylelint-webpack-plugin')// 创建stylelint插件示例对象
const stylelintPlugin = new StylelintWebpackPlugin({files: ['src/**/*.s?(a|c)ss']
})
再在plugin中添加就行了。
3、按需引入antd
cnpm install antd --save
cnpm install babel-plugin-import --save-dev
在入口文件中引入全局的css:
import 'antd/dist/antd.css'
如果仅仅是这样的话,我们加载react组件是全部加载的,这时候我们要在.babelrc的plugins中配置:
plugins: [["import", { "libraryName": "antd", "style": "css" }]]
这样之后就可以按照antd的官网来使用antd里的组件了。
OK啦,这样一个简单的react开发环境就搭建好了。
React实践(一)——webpack4搭建开发环境相关推荐
- React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境 忐忑的心情 因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
- (001) RN开发之Mac搭建开发环境
接触RN第一步:React Native中文网 搭建开发环境 必须安装的依赖有:Node.Watchman 和 Xcode. 我们推荐使用Homebrew来安装 Node 和 Watchman.在命令 ...
- 深入浅出Docker(五):基于Fig搭建开发环境
本文原创版权归 infoq 肖德时 所有,此处为技术收藏,如有再转,请于篇头保留原创作者及出处,以示尊重! 作者: 肖德时 原文: http://www.infoq.com/cn/articles/d ...
- Esp8266学习之旅① 搭建开发环境,开始一个“hellow world”串口打印。
本系列博客学习由非官方人员 半颗心脏 潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 基于C SDK的ESP8266开发技术全系列笔记 一.N ...
- PCL-1.8.1从源码搭建开发环境三(QHULL库的编译)
原文首发于微信公众号「3D视觉工坊」:PCL-1.8.1从源码搭建开发环境三(QHULL库的编译) 首先,介绍一下QHull库. QHull是一个开源的程序软件,用来研究解决凸包问题,生成凸包形体.官 ...
- PCL-1.8.1从源码搭建开发环境二(FLANN库的编译)
原文首发于微信公众号「3D视觉工坊」,PCL-1.8.1从源码搭建开发环境二(FLANN库的编译) 首先,快速近似最近邻搜索库FLANN-Fast Library for Approximate Ne ...
- Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境
引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...
- 《iOS 8开发指南(第2版)》——第1章,第1.3节工欲善其事,必先利其器——搭建开发环境...
本节书摘来自异步社区<iOS 8开发指南(第2版)>一书中的第1章,第1.1节1.3 工欲善其事,必先利其器--搭建开发环境,作者 管蕾,更多章节内容可以访问云栖社区"异步社区& ...
- 001.搭建开发环境
搭建开发环境 课程内容:搭建AS3开发环境,写第一个AS3程序 课程目的:先入为主 知识点: 1. 开发环境配置 2. 使用FlashDevelop创建AS3工程 3. 在FlashDevelo ...
最新文章
- mysql5.7 temp_MySQL5.7-学习笔记(kylix)-2019.3.29-tempundo
- asp怎么循环增加字段和字段对应的值_ASP.NET Core教程「三」实体字段属性
- 初步了解设备IO方式和ReactOS MDL实现
- Java扑克牌(enum)
- linux curl 多线程,CURL多线程不执行一直在请求
- Swift UIlabel 的高级用法,文本显示表情,图片
- Ajax在请求数据时显示等待动画遮罩
- Mycat安全权限配置user_配置mycat用户只读数据---MyCat分布式数据库集群架构工作笔记0031
- Windows下QT5.9构建的debug或release文件打包后不能使用
- 对 a = [lambda : x for x in range(3)] 的理解
- 电脑休眠和睡眠的区别
- 计算机的时钟设置错误,谷歌浏览器用不了显示电脑时钟错误解决方法
- gnfc——游戏增强现实语音通话系统
- 万圣节到了,来讲鬼故事吧!(大家可以在回复中继续讲)
- Excel:sumifs函数
- github 访问慢,一键加速,完美访问
- 联想小新air14和联想pro14哪个好
- 模拟QQ登陆,并按QQ号查询QQ基本资料
- 什么是迭代器(Iterator)?
- winDebug 调试