学习从零开始搭建React脚手架

隨風飄遠

写在前面

准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多

第一步,依赖总览

完成到我现在半成品的过程中,目前完成开发模式的相关操作,添加了babel,less,antd按需加载的地步。总体的package.json情况如下:

        {
            "name": "myreact",
            "version": "1.0.0",
            "description": "test react",
            "main": "index.js",
            "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1",
                "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
            },
            "keywords": [
                "test",
                "react"
            ],
            "author": "xxxx",
            "license": "ISC",
            "devDependencies": {
                "autoprefixer": "^9.1.2",
                "babel-core": "^6.26.3",
                "babel-loader": "^7.1.5",
                "babel-plugin-import": "^1.8.0",
                "babel-preset-es2015": "^6.24.1",
                "babel-preset-react": "^6.24.1",
                "babel-preset-stage-0": "^6.24.1",
                "css-loader": "^1.0.0",
                "html-webpack-plugin": "^3.2.0",
                "less": "^3.8.1",
                "less-loader": "^4.1.0",
                "postcss-import": "^12.0.0",
                "postcss-loader": "^3.0.0",
                "react-hot-loader": "^4.3.4",
                "style-loader": "^0.22.1",
                "webpack": "^4.16.5",
                "webpack-cli": "^3.1.0",
                "webpack-dev-server": "^3.1.5"
            },
            "dependencies": {
                "antd": "^3.8.2",
                "react": "^16.4.2",
                "react-dom": "^16.4.2",
                "react-router-dom": "^4.3.1"
            }
        }

暂时做到这些依赖,需要指出的是,webpack4和以前的版本可能有差别(不一定,或许是我没有注意到)如果需要在scrpit属性中配置,使用cli的方式运行,就需要安装webpack-cli,需要行内命令行的方式运行,就需要安装webpack-command,当然,一起安装应该也没有什么问题。这里是和教程里面配置的不一样的地方。
然后,webpack4需要指明模式production|development,所以我在dev中使用了--mode development这个参数。这也是教程中没有提到的部分。

关于babel配置

babel的相关依赖,有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,这个是babel的相关依赖,等等,有人可能会看到babel-plugin-import没有提到,这个模块的用途是为了antd的按需加载的。可以看看详细的babelrc文件:

{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
        "react-hot-loader/babel",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
      ]
  }

以上是babel的配置,preset的值就是那三个模块,至于作用,es2015是为了处理es6语法的,react是为了处理jsx语法的,stage-0是为了支持新特性的。
至于插件的配置,react-hot-loader/babel是为了热更新,不丢失状态,这点教程中已经说到了。下边的import这个,就是上边提到的babel-plugin-import的配置,也是antd的按需加载,官方推荐的配置。
还需要提到一点,这里可能一些新特性还是支持不够,比如async/await语法,可能需要再安装babel-plugin-transform-runtime这个模块,babelrc文件的plugins还需要配置"transform-runtime"这个插件进去,以支持新特性。
依赖相关的就说到这里。

webpack的配置

我这边直接在根目录下的config目录创建了webpack.dev.config.js,具体的配置如下:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 
    /*入口*/
    entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
    
    /*输出到dist文件夹,输出文件名字为bundle.js*/
    output: {
        path: path.join(__dirname, '../dist'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, '../dist'),
        historyApiFallback: true
    },
    module: {
        rules: [{
            test: /\.js[x]?$/,
            use: ['babel-loader?cacheDirectory=true'],
            include: path.join(__dirname, '../src')
        },{
            test: /\.css$/,
            use: ['style-loader','css-loader','postcss-loader'],
            
        },
        {
            test: /\.less$/,
            use:[ 'style-loader',
                {loader: 'css-loader',options:{importLoaders:1}}, 
             'less-loader'],
           
        }]
    },
    plugins:[new HtmlWebpackPlugin({
        title:'react测试',
        template:'./src/index.html',
        filename:'./dist/index.html'
    })],
    devtool: 'inline-source-map',
    resolve:{
        alias: {
            "@":path.join(__dirname, '../src/')
        }
    }

};

这边的配置就没啥说的,基本上loader的配置,目前完成js(x)的处理,css/less的处理,和其他的常规cli配置,少了url-loader,file-loader,代码分割这些功能。


完结

差不多配置就是这样,很简陋,功能也不齐全,需要完成的工作还有很多。不过自己动手,丰衣足食……
项目的github地址 diy-react-cli欢迎各位来串门哟!
这个项目还在不断的完善中。

阅读 3.9k
538 声望
6 粉丝
0 条评论
538 声望
6 粉丝
文章目录
宣传栏