来说说我是如何从头开始搭建一个项目

yyxie
751 阅读4分钟

搭建项目这件事情，我做过很多次，每次开始的时候都有种不知如何下手的感觉。硬着头皮做后慢慢的上路后变的稍微从容些，但是最终完成后，回过头又忘记了自己搭建项目的套路，所以以至于每次要搭建项目都有点头痛，这次下定决心我要将我搭建项目的过程记录下来，留作以后搭建项目的参考，也给刚开始自己搭建项目的小伙伴一个参考，如有讲的不对希望大佬们批评指正。

开始

1、首先选择我们熟悉或者喜欢的技术框架 因为我日常的工作用的框架是react，所以这次我还是使用react，对于是否使用脚手架，我这次是决定使用脚手架，当然如果想要尝试自己动手配置webpack的也是可以不用脚手架，不过不管你是使用脚手架还是不使用脚手架，webpack的配置都要大概的了解些，但我这次就省事使用脚手架是create-react-app，这次做项目的时候我希望的是自己能够尝尝ts的香（哈哈，一直不知道typescript香不香，光听网上各种说香，忍不住想尝一尝

2、开始创建项目（这一步我们可以参考你选择的框架相应的文档说明） 这里我们使用TypeScript,你可以在控制台中运行：my-app是你想要创建的项目的名称可以随意改成你想要的名字

  $ npx create-react-app my-app --typescript
  $ 或者
  $ yarn create-react-app my-app --typescript

这样我们可以打开我们刚才的创建的项目my-app，并在该项目下执行 npm start，默认的端口号是3000（当你电脑该3000端口被占用了，启动的时候就会自动给你确认是够更换端口，这个时候你可以自行选择了）。这时候就会在打开http://localhost:3000网页。这就是最初cra(下面咱们都用cra来代称create-react-app）帮我们实现的最初的样子

  1. 开始自定义配置 cra 为了让大家可以专注于代码，预置了很多配置，而且这些配置都是隐藏的，那如果我们想要自定义配置怎么办呢

方案一：

npm run eject

注意：这是单向操作。一旦你 eject ，你就不能回去了！ 此命令将从项目中删除单个构建依赖项。

相反，它会将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）复制到项目中，以便你可以完全控制它们。

方案二: 使用react-app-rewired, customize-cra

首先，react-app-rewired是react社区开源的一个修改CRA配置的工具，例如扩展Create React App的Webpack配置，而customize-cra提供了一组用于自定义利用react-app-rewired核心功能的Create React App v2配置, 可以通过config-overrides.js文件来对webpack配置进行扩展

1.首先安装 customize-cra react-app-rewired

yarn add customize-cra react-app-rewired --dev

2.安装好后我们在项目的根目录下(和package.json同级目录)新建config-overrides.js文件，首先我导入override函数，因为所需的任何插件调用它。该函数将使用新修改的配置对象进行重写。如下

3. 替换 package.json 中 scripts 执行部分 /* package.json */

"scripts": {

  • "start": "react-scripts start",
  • "start": "react-app-rewired start",
  • "build": "react-scripts build",
  • "build": "react-app-rewired build",
  • "test": "react-scripts test --env=jsdom",
  • "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" } 注意：不用替换 eject 部分。工具中没有针对 eject 的配置替换，

4.接下来我们就可以定制自己需要的配置了比如我项目中需要使用less 使用less前我们需要安装 less 和 less-loader

yarn add less
yarn add --dev less-loader

或者:

npm i less
npm i -D less-loader

然后修改config-overrides.js，如下

这样咱们再将项目中本来是css的文件修改为less，运行下看效果

然后一个less的配置就完成了，其他相关可能会用的配置git中都有地址

接下来对于我在项目中最常用的就是发布的时候怎么搞的，所以关于发布主要关注的是package.json中publicPath 和 path

path: 规定所有输出文件的目标路径，通常来说就是我们的dist文件夹。 publicPath：规定所有已经解析的文件目录，url相对于index.html。

在使用create-react-app中如何配置这些呢？

   ...
   (config) => { //暴露webpack的配置 config ,evn
       config.output.publicPath = './'
       return config;
   }
   ...

哈哈，就是上面这样，注意不可以向下面这样写

    ...
    (config) => { //暴露webpack的配置 config ,evn
        config.output = {
            publicPath:  './'
        }
        return config;
    }
    ...

这样的话我们就需要将output中的其他配置也要配置一遍喽，还有就是咱们这里用的是当前路径下。

avatar
文章
阅读
粉丝