安装create-react-app教程及简单配置

1.安装

//my-app为项目名称  因为本文是教程所以就以默认的my-app为例进行安装
npm init react-app my-app

当出现下方图片的这个样子时,就代表我们安装成功了。

在这里插入图片描述
我们可以按照其的建议 先进入到自己的项目,然后再运行一下,看看项目是否能正常启动,如果不能,我们就需要按需解决其出现的问题。

cd my-app
npm start

2.将项目的配置文件暴露出来

通过查看项目文件列表,我们可以发现,我们找不到该项目的配置文件。
在这里插入图片描述
当然,如果我们只是学习一些简单的react语法的话,我们无需修改项目的配置文件。但是,如果我们需要进行一些高级的使用,例如:加载一些webpack插件、babel解析插件、设置别名、本地跨域代理等时,我们就不得不需要对项目的配置文件进行修改。

暴露配置文件的命令为

npm run eject

命令输入后,会出现一个提示信息,询问我们是否要确认操作。当我们输入 y 后,等待即可。
在这里插入图片描述

注意:这是一项单向操作,一旦暴露就无法还原恢复!
我们可以看到如下图所示,一些新的文件被抛出创建,我们需要的配置文件就在config文件夹中。
在这里插入图片描述

3.自定义配置

3.1区分npm包的开发环境和生产环境

我们可以看到,抛出的package.json中,所有的npm都在生产环境中。如果将来我们要将项目进行打包的话,项目包的体积将会变得很大。因此,我们需要将一些开发才会用到的包提取出来定义。这里就需要大家自己来均衡了,例如:一些babel以及ESlint等包就是开发才会用到的包。
在这里插入图片描述

我们需要在package.json中添加这个devDependencies,并将一些npm包存放到这里。如图我进行了简单的分包,将react的特有包放入到生产环境中。

在这里插入图片描述

我们将包分开后,先将node_modules删除,再重新安装,以避免分包产生一些问题影响到以后的开发或打包。

重新安装node_modules我们可以使用如下命令

npm i

然后重新运行项目:npm start
当浏览器出现如下页面时,表示项目成功的运行起来了。之前的分包没有出现什么问题。

在这里插入图片描述

3.2定制项目配置,并运用

新建一个react.config.js文件,详情可以查考vue-element-admin项目的vue.config.js文件。当然,我只设置一些简单的配置以做演示。

const path = require('path')
module.exports = {
  resolve: {
    // 设置别名, 列如用@来代理src文件夹的绝对路径
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    // babel解析规则,例如:如下的解析.less文件
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true,
              }
            }
          }
        ]
      }
    ]
  },
  // 这里可以存放要使用的插件
  plugins: [],
  //这里配置开发环境,以用来开发时做跨域请求等的设置,详情可以自行百度了解
  devServer: {
    port: 3000,
    open: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
      }
    }
  }
}

在项目的cofig文件中webpackDevServer.config.js中进行如下配置,以用来设置proxy等配置。

在这里插入图片描述

在这里插入图片描述

在config的webpack.config.js文件中,可以进行如下的修改。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

目前,我们先进行如下的修改,其他需求配置可以慢慢的配置,然后在config文件夹的文件中进行配置。

注意:这个项目不支持异步加载 async import,修饰器@decorator。需要安装babel-plugin-syntax-dynamic-import,babel-plugin-transform-decorators-legacy两个插件


版权声明:本文为wang_9909原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>