从零开始搭建一个基于React框架的博客发布系统 （三）开发环境搭建

现在本地已经生成了博客文件，先不说部署，首先要把整个项目的环境搭建起来。

不要嫌弃篇幅过长，因为我真的很想把每一步操作都写出来。

我们运行初始的页面，确保初始框架可用，避免后续发生问题找不到根源。

运行命令：yarn start，记得吗，这个也是package.json下scritps中的。

默认端口是3000，如果能看到页面就说明我们的项目能用了。

话说，ES2018都出来了，我们怎么能一直停滞不前？所以我们要尽可能多的使用新特性，诸如装饰器，箭头函数，结构赋值等等。浏览器不支持怎么办？babel帮我们做了很多，可以把新标准的代码转换成浏览器读得懂的代码。

经过考虑，这个项目我决定不引入redux了，这个框架相较于mobx大了点，本着学习新知识的态度，就用mobx来实现数据的传递吧。提到mobx，他使用了大量的装饰器，所以我们要开始配置环境了。

首先安装一个依赖包yarn add babel-plugin-transform-decorators-legacy -D，这种写法会将依赖包加载到package.json的devDependencies中，而不是dependencies第一个是只用于开发环境，第二个要用于生产环境。所以生产环境中用不到的包就可以直接添加到第一个里面就好了。

下面是一共需要安装的包。我会尽量说一下每个的作用，尽量少的引入包，让系统更轻。

依赖包

yarn add antd安装antd

yarn add babel-plugin-transform-decorators-legacy -D

yarn add babel-preset-env -D .babelrc中的配置需要

yarn add babel-plugin-transform-runtime -D

yarn add babel-plugin-import -D 配置后，可以引入模块，可以参考官网

yarn add babel-preset-stage-0 -D

yarn add babel-cli -D`这个好像不是必须加的，我移除了之后代码也可以运行。

yarn add prismjf代码块高亮插件

yarn add react-html-parser读取html文件并显示

yarn add react-markdown react中使用markdown

yarn add react-router-dom

安装了依赖包之后，在根目录下面新建一个.babelrc来覆盖一些eslint的默认操作。

新建.babelrc文件

{
    "presets": [
        "env",   env参数囊括了es2015,2016,2017只写这一个就够了
        "react",   这个参数一定要加，解析react的
        "stage-0" 这是babel规范，没有这个，我知道的有import,export使用会发生异常。
    ],
    "plugins": [
        [
            "transform-runtime",  这个插件，是添加一个小垫片，拒绝把常用函数添加到每个引用文件，避免重复
            {
                "helpers": false,
                "polyfill": false,
                "regenerator": true
            }
        ],
        "transform-decorators-legacy",  可以使用装饰器
        [  
            "import",          这个是antd官网推荐的使用方式,不然antd无法正常模块按需引用
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ]
    ]
}

这样可以保证编译的时候不报错了，但是你会发现被装饰器装饰的方法或者类下面会有小红线，这样可以在根目录下面新建jsconfig.json

新建jsconfig.json文件

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "target": "es2017"
    },
    "exclude": [
        "node_modules",
        "dist"
    ],
    "include": [
        "src",
        "env",
        "static"
    ]
}

总结上面这套流程可是费了不少功夫的，基本上是报错一个加一个，有的还找了半天错误在哪里，我居然还天真的以为create-react-app默认引用的包有antd,一个莫名其妙的错误找到最后居然是么有引入antd…

---

webpack开发环境配置

事实证明引入antd之后并不是安枕无忧的，antd以及所有node_modules中的库，都是不支持样式模块化的，所以要对自己的模块开启样式模块化，对node_modules中的模块关闭css模块化。
参照我上传的webpack.config.dev.js文件，到大概161行，注释掉之前处理css的方式，添加如下代码：

{
        test: /\.css$/,
        include: paths.appSrc,   //antd以及node_modules中的库，不支持样式模块化
        use: ExtractTextPlugin.extract({
        fallback: "style-loader",   //最后一个执行
        use: [
            {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    modules: true,   //开启模块化
                    localIdentName: '[name]_css_[local]--[hash:base64:5]'
                },
            },
            {
                loader: require.resolve('postcss-loader'),
                options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    ident: 'postcss',
                    plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                            browsers: [
                                '>1%',
                                'last 4 versions',
                                'Firefox ESR',
                                'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                        }),
                    ],
                }
            }
        ],
        publicPath: 'css/'
        })
     },
     {
    test: /\.less$/,
    include: paths.appSrc,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    modules: true,
                    localIdentName: '[name]_less_[local]--[hash:base64:5]'
                },
            },
            {
                loader: require.resolve('postcss-loader'),
                options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    ident: 'postcss',
                    plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                            browsers: [
                                '>1%',
                                'last 4 versions',
                                'Firefox ESR',
                                'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                        }),
                    ],
                }
            },
            require.resolve('less-loader'),    //将less变成css
        ],
        publicPath: 'css/'
    })
        },
        {
            test: /\.css$/,
            include: paths.appNodeModules,   //将node中不加module打包
            use: [
                'style-loader',
                'css-loader',
            ]
},

大概的操作也都写过注释了，这里说明一下，webpack执行顺序是从下向上的，先关闭node_modules中的模块化，publicPath是处理的文件夹，首先将所有的less文件转换成css文件，然后开启模块化，fallback最后执行，将编译的css插入到页面里面。
webpack中要引用一下
const ExtractTextPlugin = require('extract-text-webpack-plugin')
然后，要在插件中加载一下，new ExtractTextPlugin("css/[name].[contenthash].css")这样就可以正常使用antd了。
这里涉及的依赖包如下，

yarn add less -D    
yarn add extract-text-webpack-plugin -D
yarn add less-loader -D
yarn add css-loader -D
yarn add postcss-loader -D
yarn add postcss-flexbugs-fixes -D    //postcss的flex有一些bug存在

不管怎么说，现在项目终于不报错了，所以我们来一步步开发剩下的代码。

首先我们知道本地有一份代码地图，所以我们下一次可以实现根据代码地图来创建一个menu来帮助选择每一个创建的博客。
欢迎收看下一篇：从零开始搭建一个基于React框架的博客发布系统 （四）菜单栏和文章列表实现