open-index/open-npm huggingface dataset:
npm package: @kne/cra-template-components
Description: 初始化一个远程组件项目
Latest version: 0.1.4

# cra-template-components
初始化一个远程组件项目

## 安装

```shell
npx create-react-app project-name --template=@kne/cra-template-components
```

## 注意

由于cra限制，模板不能拿到project-name，初始化完成后需要再手动进行一些修改，后期会替换掉cra

1. package.json

    删除
    ```json
        {"private":true}
    ```
    
    修改
    ```json
    {"name": "project-name"}
    ```
    为
    ```json
    {"name": "@kne/project-name"}
    ```
    
    将components-name替换为实际项目名
    ```json
    {
      "scripts": {
        "build": "cross-env COMPONENTS_NAME=components-name MODULES_DEV_PUBLIC_URL=/components-name  craco build"
      }
    }
    ```
   
2. src/preset.js
    替换其中的components-name为实际项目名
   ```js
       remoteLoaderPreset({
           remotes: {
               default: componentsCoreRemote,
               'components-core': componentsCoreRemote,
               'components-name': process.env.NODE_ENV === 'development' ? {
                   remote: 'components-name', url: '/', tpl: '{{url}}'
               } : {
                   remote: 'components-name',
                   url: 'https://registry.npmmirror.com',
                   tpl: '{{url}}/@kne%2f{{remote}}/{{version}}/files/build',
                   defaultVersion: process.env.DEFAULT_VERSION
               }
           }
       });
    ```
3. .github/workflows/publish.yml

    将packageName替换为package.json中的name
    ```yml
    - name: Sync To Cnpm
      run: npm i -g cnpm && cnpm sync packageName
    ```
npm package: @kne/cra-template-project
Description: 初始化一个React App应用项目.
Latest version: 1.0.0

# cra-template-components
初始化一个项目

## 安装

```shell
npx create-react-app project-name --template=@kne/cra-template-project
```

## 注意

由于cra限制，模板不能拿到project-name，初始化完成后需要再手动进行一些修改，后期会替换掉cra

1. package.json

   将project-name替换为实际项目名
    ```json
    {
      "scripts": {
        "build": "cross-env COMPONENTS_NAME=project-name MODULES_DEV_PUBLIC_URL=/project-name  craco build"
      }
    }
    ```
npm package: @kne/craco-module-federation
Description: Add module federation support to your CRA5 application without ejecting
Author: hasanayan
Latest version: 1.1.8

# craco-module-federation

## Note

THIS IS NOT PRODUCTION READY
Webpack 5 support of CRA is still in its alpha phase and there might be breaking changes in either CRA5 or this plugin in the future.

Add module-federation support to your CRA5 project without ejecting and losing update support of react-scripts

![](https://img.shields.io/npm/v/craco-module-federation.svg?style=flat)
![](https://img.shields.io/npm/dt/craco-module-federation.svg?style=flat)

## Install

```
npm install craco-module-federation --save-dev
```

## Usage

1. Add the plugin into your craco.config.js;

```
const cracoModuleFederation = require('craco-module-federation');

module.exports = {
    plugins: [{
        plugin: cracoModuleFederation,
        options: { useNamedChunkIds:true } //THIS LINE IS OPTIONAL
      },
    ]
}
```

2. create a file named `modulefederation.config.js` in the project root. You should export ModuleFederationPlugin constructor options as json from this module. For example;

```
const deps = require("./package.json").dependencies;

module.exports = {
  name: "app1",
  exposes: {
    "./Button": "./src/Button",
  },
  remotes: {
    app2: "app2@http://localhost:3002/remoteEntry.js",
  },
  filename: "remoteEntry.js",
  shared: {
    ...deps,
    react: {
      singleton: true,
      requiredVersion: deps["react"],
    },
    "react-dom": {
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  },
};

```

3. Update the scripts section of your package.json as follows:

```
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "craco:build": "craco build",
    "craco:start": "craco start",
    ...
```

## Testing the plugin locally

There are two test apps in this repository inside test folder (app1 and app2). Install their dependencies on them using yarn (`yarn install`) and hit `yarn start` on both of them. When you navigate to app1 it should render the exported button from app2 that says `hello from app2`

## License

Licensed under the MIT License, Copyright ©️ 2021 Hasan Ayan. See [LICENSE.md](LICENSE) for more information.