cunde / cp-cra-eject

Create React App eject method operate. learning

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

项目来源: Create React App.

当前的项目是通过eject之后所得,故我们可以在此项目中配置一些定制化的东东、、、

定制化list

How to add support for decorators

我们在很多地方都有看到如下写法的:

import CSSModule from 'react-css-modules';
import styles from'./App.css';
@CSSModule(styles, {allowMultiple: true})

当我们默认启用create-react-app创建项目的时候默认是不支持decorators的,我们当前为了项目更友好的支持当前写法,我们对项目做了相应的修改:
我们只需要对config/webpack.config.dev.jsjs|jsxquery中添加plugins: ['transform-decorators-legacy' ]重启。就可以搞定了!

react-router

当前项目是不支持react-router的,我们需要搞点事情:

  • 我们修改修改了入口文件index.js

    import ReactDOM from 'react-dom';
    import RoutersList from './routers';
    
    ReactDOM.render(
      RoutersList,
      document.getElementById('root')
    );
  • 添加路由集合文件routers.jsx

    import React from 'react';
    import {Router,Route,Switch} from 'react-router';
    import createBrowserHistory from 'history/createBrowserHistory';
    const history = createBrowserHistory();
    
    // NOTE: starting page引入
    import HomePage from './App';
    
    // NOTE: ending
    export default (
        <Router history={history}>
            <Switch>
                <Route exact={true} path='/' component={HomePage} />
            </Switch>
        </Router>
    )

现在我们可以简单使用当前的脚手架了

react-css-modules的使用:

我们之前在cp-create-react-app中使用过react-css-modules,但未能顺利的执行操作。
但是我们能在Create React APP默认的操作中生成的项目是可以使用sass的.
👊 我们来看看如何在eject之后的项目中使用react-css-modules

// NOTE: install style-loader css-loader sass-loader
{
  test: /\.css$/,
  // loader: 'style!css?importLoaders=1!postcss'
  loaders: [
  'style?sourceMap',
  'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
  ]
},
{
  test: /\.scss$/,
  loaders: [
      'style?sourceMap',
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
      'resolve-url',
      'sass?sourceMap'
  ]
},

浅谈GitHub初始化

出于我之前对git仓库的粗略了解。
每当我想创建个git仓库时:

  • 首先:在git上new一个新的项目

  • 其次:git clone 当前项目到本地

  • 对文件修改之后,我执行以下操作:

    • git add .
    • git commit -m '****'
    • git push

    以上操作是针对master分支操作的,其他分支操作,我只需要在git上进行一次merge,或者本地的git merge操作就可以了。

以上操作就可以满足我们的正常git的简单操作需求了!
但是我们有些时候,我们想把之前在本地已有的文件上传到git的空间。
如果按照上边的操作我们感觉似乎有点笨重。所以我们还是尽情的享受一下gitCLI操作吧!

我们来体验一下git本文件添加到git仓库的操作:

假定我们本地有个cp-cra-eject的文件

  • 进入当前文件cd cp-cra-eject中: git init

  • git st执行之后我们会看到被修改的文件

  • git commit -m "text"

  • 此时我们就需要在远程git上创建cp-cra-eject的仓库 image

  • 之后我们就需要执行`git remote add ``

    $ git remote add origin <仓库的git地址了>
    
  • git pull origin master

  • git push -u origin master 一般我们执行此命令时会出现错误: image

  • 处理以上的错误我们执行 git push -f origin master 强制操作

以上操作我们就已经把当前项目提交到git仓库中了。但是我们再次修改时候直接执行git push 操作的时候会有提示操作。我们直接按git提示就可以搞定了

梳理执行过程:

    git init
    git add .
    git commit -m 'text'
    创建git仓库
    git pull origin master
    git remote add origin <git url>
    git push -f origin master
    git push --set-upstream origin master || git push -u origin master

🙏 以上操作应该可以满足你的需求了

About

Create React App eject method operate. learning


Languages

Language:JavaScript 96.8%Language:HTML 2.4%Language:CSS 0.9%