# 从零开始封装一个属于自己的UI框架（二） --配置开发环境篇

ECharts5.0版本即将上线，来说说我与ECharts的那些事吧！>>>

前言

上一篇思考了一个组件库的开发需要什么东西，所以第二步需要做的是配置开发环境，这里我选用的是React官方推荐的脚手架create-react-app，但是直接用create-react-app创建项目并不能直接满足我们的需求，所以这里开始考虑要怎么去组织项目结构。

创建项目

环境要求

根据官方文档要求，使用create-react-app创建项目环境要求为 Node >= 8.10 和 npm >= 5.6

指令

npx create-react-app hrmui-ts-react --template typescript
复制代码

npx不是拼写错误，而是 npm 5.2+ 附带的 package 运行工具 hrmui-ts-react：我的项目名字 --template typescript：表示该项目使用typescript

项目目录

以上是刚创建完的项目目录，接下来我们将对该项目进行改造

项目配置

暴漏配置文件

我们可以看到上面的项目目录没有webpack的相关配置，因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置，可以使用命令

npm run eject
复制代码

把webpack文件暴露出来， 但是需要注意的是，该操作不可逆。

暴漏配置文件后的项目目录

webpack.config有两个，一个是dev（开发）环境下的配置文件，一个为prod（生产环境下，即npm run build的配置文件）环境下的配置文件。

安装Less和Less-loader

命令

运行以下命令：

npm install less-loader less --save
复制代码

修改webpack配置文件

首先在目录中找到webpack.config.js文件 然后在webpack.config.js文件找到以下这段代码

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
复制代码

在这段代码下面直接添加以下代码

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
复制代码

然后在文件中搜索oneof 我们可以看到关于sass那段配置

       {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
复制代码

那我们再加入less的相关配置：先复制一份，将sass部分修改为less，再加入oneOf数组。

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using less
            // using the extension .module.scss or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },
复制代码

这时候我们就可以使用less了。

生产环境去除console

compress: {
ecma: 5,
warnings: false,
drop_debugger: true,
drop_console: true,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
......
复制代码

添加装饰器插件transform-decorators-legacy

安装 @babel/plugin-proposal-decorators

yarn add --dev @babel/plugin-proposal-decorators
复制代码

修改package.json中plugins

"plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], .... ]
复制代码

项目打包生成.gz文件

安装插件compression-webpack-plugin

yarn add --dev compression-webpack-plugin
复制代码

修改webpack.config.js

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [
...
isEnvProduction && new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
]
复制代码

安装 ESLint

指令

npm install --save-dev eslint
npm install --save-dev typescript @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin
复制代码

创建配置文件

ESLint 需要一个配置文件来决定对哪些规则进行检查，配置文件的名称一般是 .eslintrc.js 或 .eslintrc.json。 当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。 我们在项目的根目录下创建一个 .eslintrc.js，内容如下：

module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
rules: {
// 禁止使用 var
'no-var': "error",
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': [
"error",
"interface"
]
}
}
复制代码

规则的取值一般是一个数组（上例中的 @typescript-eslint/consistent-type-definitions），其中第一项是 off、warn 或 error 中的一个，表示关闭、警告和报错。 后面的项都是该规则的其他配置。如果没有其他配置的话，则可以将规则的取值简写为数组中的第一项（上例中的 no-var）。

修改package.json

{
"scripts": {
"eslint": "eslint src --ext .ts"
}
}
复制代码

安装 ESLint

指令

npm install --save-dev prettier
复制代码

创建一个 prettier.config.js 文件

// prettier.config.js or .prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
};
复制代码

安装 VSCode 中的 Prettier 插件，然后修改 .vscode/settings.json

{
"files.eol": "\n",
"editor.tabSize": 4,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "typescript",
"autoFix": true
}
],
"typescript.tsdk": "node_modules/typescript/lib"
}
复制代码

注：ESLint 原生的规则和 @typescript-eslint/eslint-plugin 的规则太多了，而且原生的规则有一些在 TypeScript 中支持的不好，需要禁用掉。