美文网首页程序员
通过react脚手架新建一个工程(1)

通过react脚手架新建一个工程(1)

作者: 木中木 | 来源:发表于2018-09-08 18:27 被阅读0次

    目前,比较熟知的脚手架有create-react-app和generator-z-react-cli,废话不多说,直接开始
    1.下载create-react-app,并全局安装

    npm install create-react-app -g
    

    接下来,我们安装我们的工程

    create-react-app create-react-prj
    cd .\create-react-prj\
    npm start
    

    安装完成后我们可以看到当前的目录结构

    create-react-prj
      |--build      //构建目录,遵循发布系统规范
      |   |-- index.html    //静态页面
      |   |-- static        //资源文件
      |
      |-- node_modules      //项目组件文件夹:所有安装的组件都在这
      |
      |--src                //源码目录
      |   |--index.js       //入口文件(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
      |
      |--public             //静态页面目录
      |   |--index.html     //主页面(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
      |
      |-- .gitignore        //git提交的忽略文件,我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发,生成的文件)
      |--package.json   //项目依赖项及项目基础信息
      |--README.md      //项目描述
      |-- ...
    
    

    生成的package.json

    {
      "name": "create-react-prj",
      "version": "0.1.0",
      "private": true,
      "dependencies": {  //=>生产依赖项
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-scripts": "1.1.0"
      },
      "scripts": {   //=>可执行脚本
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }
    
    /*
     * 可执行脚本注释:
     *   $ npm run start  启动服务,自动编译项目,可以实现边开发,边自动编译刷新,看到最新开发的效果
     *   
     *   $ npm run build  把项目整体进行编译,最后再bulid目录中生成项目编译后的文件,我们上传服务器的就是这些文件
     *   
     *   $ npm run test   使用Jest作为测试运行程序(不常用) 
     *    
     *   $ npm run eject  下文具体介绍使用
     *   
     *   当然以上操作也可以基于yarn来完成
     */
    
    

    这里我们看到通过create-react-app新建的工程,目录很优雅,没有webpack那些繁杂的配置,因为脚手架把这些配置都隐藏了,那么如果我们想要修改webpack配置,要怎么处理?

    执行  npm run eject
    

    执行后,目录结构更改

    create-react-prj
      |-- config        //webpack的配置文件都在这里
      |     |--jest
      |     |  |--cssTransform.js
      |     |  |--fileTransform.js
      |     |--env.js
      |     |--paths.js
      |     |--polyfills.js
      |     |--webpack.config.dev.js
      |     |--webapck.config.prod.js
      |     |--webpackDevServer.config.js
      |
      |--scripts
      |   |-- build.js
      |   |-- start.js
      |   |-- test.js
      后期如果想修改配置信息,修改webpack.config.dev.js、webpack.config.prod.js即可,当然其它的大家也可以去修改(前提是研究明运行的原理)
    
    

    pakage.json中的目录如下

    {
      "name": "create-react-prj",
      "version": "0.1.0",
      "private": true,
      "dependencies": { //=>在依赖项中把之前隐藏的(已经安装的)模块都显示出来了,其中很多都是配置webpack需要安装的 
        "autoprefixer": "7.1.6",
        "babel-core": "6.26.0",
        "babel-eslint": "7.2.3",
        "babel-jest": "20.0.3",
        "babel-loader": "7.1.2",
        "babel-preset-react-app": "^3.1.1",
        "babel-runtime": "6.26.0",
        "case-sensitive-paths-webpack-plugin": "2.1.1",
        "chalk": "1.1.3",
        "css-loader": "0.28.7",
        "dotenv": "4.0.0",
        "dotenv-expand": "4.0.1",
        "eslint": "4.10.0",
        "eslint-config-react-app": "^2.1.0",
        "eslint-loader": "1.9.0",
        "eslint-plugin-flowtype": "2.39.1",
        "eslint-plugin-import": "2.8.0",
        "eslint-plugin-jsx-a11y": "5.1.1",
        "eslint-plugin-react": "7.4.0",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.5",
        "fs-extra": "3.0.1",
        "html-webpack-plugin": "2.29.0",
        "jest": "20.0.4",
        "object-assign": "4.1.1",
        "postcss-flexbugs-fixes": "3.2.0",
        "postcss-loader": "2.0.8",
        "promise": "8.0.1",
        "raf": "3.4.0",
        "react": "^16.2.0",
        "react-dev-utils": "^5.0.0",
        "react-dom": "^16.2.0",
        "redux": "^3.7.2",
        "style-loader": "0.19.0",
        "sw-precache-webpack-plugin": "0.11.4",
        "url-loader": "0.6.2",
        "webpack": "3.8.1",
        "webpack-dev-server": "2.9.4",
        "webpack-manifest-plugin": "1.3.2",
        "whatwg-fetch": "2.0.3"
      },
      "scripts": { //=>去掉了eject命令(这个命令是不可逆转的,执行一次生效后,就去掉这命令了)
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js --env=jsdom"
      },
      "jest": { 
        "collectCoverageFrom": [
          "src/**/*.{js,jsx,mjs}"
        ],
        "setupFiles": [
          "<rootDir>/config/polyfills.js"
        ],
        "testMatch": [
          "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
          "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
        ],
        "testEnvironment": "node",
        "testURL": "http://localhost",
        "transform": {
          "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
          "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
          "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
        ],
        "moduleNameMapper": {
          "^react-native$": "react-native-web"
        },
        "moduleFileExtensions": [
          "web.js",
          "mjs",
          "js",
          "json",
          "web.jsx",
          "jsx",
          "node"
        ]
      },
      "babel": {
        "presets": [
          "react-app"
        ]
      },
      "eslintConfig": {
        "extends": "react-app"
      }
    }
    
    

    这里我们可以看到 eject这个命令没有了,因为这个命令是不可逆的。

    generator-z-react-cli
    一款基于yeoman generator的脚手架:http://yeoman.io/ 1.首先基于npm在全局安装yeoman

    npm install -g yo
    

    其次在全局下安装脚手架

    npm install -g generator-z-react-cli
    

    最后生成项目

    yo z-react-cli
    
    

    目录结构:

    my-app
      |-- index.html //启动页(主页)
      |-- build //构建目录,遵循发布系统规范
      |    |-- index.html   //静态页面
      |    |-- static       //资源文件发布到cdn,或发布到服务器  
      |
      |-- src                     //源码目录
      |    |--component           // 组件
      |    |      |-- common      //公共组件
      |    |      |-- temp        //父组件
      |    |--Config              //工具方法
      |    |--Image               //图片资源
      |    |--Redux               //react-redux数据状态管理
      |    |      |-- action.jsx  //派发数据的action
      |    |      |-- reducer.jsx //用于处理action的reducer
      |    |      |-- store.jsx   //数据管理器
      |    |-- Router           //路由
      |    |-- Style            //样式
      |    |-- template         //编译html模板
      |    |-- App.jsx          //js入口文件
      |
      |-- webpack.config.hot       //本地热编译
      |-- webpack.config.buildt    //编译发布测试环境
      |-- webpack.config.online    //编译发布线上环境
      |-- server.js
      |-- server_hot.js    //本地服务器启动文件
      |-- .babelrc  //ES6语言解析设置
      |-- package.json  //项目依赖项
      |-- 
    

    安装依赖
    报了一个错误

    check python checking for Python executable "python2" in the PATH
    gyp verb which failed Error: not found: python2
    然后我们谷歌了一把

    npm --add-python-to-path='true' --debug install --global windows-build-tools
    npm install --global node-gyp
    

    执行完成后,就没有报错,安装完成

    npm run hot

    项目整体编译部署,用于测试环境 npm run buildt

    项目整体编译部署,用于线上环境 npm run online

    这个特色就是可以解析JSX语法,可以解析ES6语法新特性,支持LESS、SCSS预处理器,编译完成自动打开浏览器,单独分离CSS样式文件,支持文件MD5戳,解决文件缓存问题,支持图片,图标字体等资源的编译,支持浏览器源码调试,实现组件级热更新,实现代码的热替换,浏览器实时刷新查看效果,区分开发环境和生产环境分离业务功能代码和公共依赖代码
    很明显 这个脚手架集成了更加强大的功能

    相关文章

      网友评论

        本文标题:通过react脚手架新建一个工程(1)

        本文链接:https://www.haomeiwen.com/subject/miekgftx.html