React实践(一)——webpack4搭建开发环境
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开发环境就搭建好了。