yarn 创建react license 怎么选 create react app 部署

转载

lingyuli 2023-12-10 10:30:07

文章标签 react.js javascript webpack 配置文件生产环境 文章分类 Yarn 大数据

1.安装

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

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

yarn 创建react license 怎么选 create react app 部署_react.js

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

cd my-app
npm start

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

通过查看项目文件列表，我们可以发现，我们找不到该项目的配置文件。

当然，如果我们只是学习一些简单的react语法的话，我们无需修改项目的配置文件。但是，如果我们需要进行一些高级的使用，例如：加载一些
webpack插件、babel解析插件、设置别名、本地跨域代理
等时，我们就不得不需要对项目的配置文件进行修改。

暴露配置文件的命令为

npm run eject

命令输入后，会出现一个提示信息，询问我们是否要确认操作。当我们输入 y 后，等待即可。

yarn 创建react license 怎么选 create react app 部署_react.js_03

注意：这是一项单向操作，一旦暴露就无法还原恢复！

我们可以看到如下图所示，一些新的文件被抛出创建，我们需要的配置文件就在config文件夹中。

yarn 创建react license 怎么选 create react app 部署_react.js_04

3.自定义配置

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

我们可以看到，抛出的package.json中，所有的npm都在生产环境中。如果将来我们要将项目进行打包的话，项目包的体积将会变得很大。因此，我们需要将一些开发才会用到的包提取出来定义。这里就需要大家自己来均衡了，例如：一些babel以及ESlint等包就是开发才会用到的包。
我们需要在package.json中添加这个devDependencies，并将一些npm包存放到这里。如图我进行了简单的分包，将react的特有包放入到生产环境中。

yarn 创建react license 怎么选 create react app 部署_webpack_06

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

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

npm i

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

yarn 创建react license 怎么选 create react app 部署_配置文件_07

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,
      }
    }
  }
}