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

前言

上一篇思考了一个组件库的开发需要什么东西，所以第二步需要做的是配置开发环境，这里我选用的是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"
}
复制代码