对于那些喜欢自动生成和管理webpack,babel,jest等配置的用户,Single-spa提供了一个CLI。您不一定非得用CLI来生成single-spa的配置。

此CLI为 create-single-spa (Github link)。它旨在用于创建新项目和更新由 create-single-spa 创建的项目,但不适用于将已经存在的代码库迁移至singa-spa。

Installation and Usage

如果你想全局安装 create-single-spa ,请在终端中运行如下命令:

  1. npm install --global create-single-spa
  2. # or
  3. yarn global add create-single-spa

执行以下命令:

  1. create-single-spa

你也可以选择本地安装 create-single-spa

  1. npm init single-spa
  2. # or
  3. npx create-single-spa
  4. # or
  5. yarn create single-spa

这将触发CLI提示,询问你将创建或更新哪种项目。

CLI arguments

你可以如下这种方式传参数给create-single-spa :

  1. # Different ways of doing the same thing
  2. create-single-spa --framework react
  3. npm init single-spa --framework react
  4. npx create-single-spa --framework react
  5. yarn create single-spa --framework react

以下为有效参数:

—dir

你可以用以下方式指定 create-single-spa 执行的路径

  1. # Two ways of doing the same thing
  2. create-single-spa my-dir
  3. create-single-spa --dir my-dir

—moduleType

你可以用 --moduleType 指定创建哪一种应用 :

  1. create-single-spa --moduleType root-config
  2. create-single-spa --moduleType app-parcel
  3. create-single-spa --moduleType util-module

—framework

你可以用 --framework 参数指定使用哪种框架,如果不传 --moduleType ,默认是 app-parcel

  1. create-single-spa --framework react
  2. create-single-spa --framework vue
  3. create-single-spa --framework angular

Project types

create-single-spa 将询问你将要创建 single-spa应用,公共模块,或者根配置。所有这三种模式都会假定你使用的是推荐安装

如果你选择创建一个single-spa应用,则会提示您选择哪种框架。React使用 babel + webpack + jest的预置配置。Angular使用Angular CLI和single-spa-angular。Vue使用Vue CLI和vue-cli-plugin-single-spa

NPM packages

Within the create-single-spa repo, there are several NPM packages. The following sections document each package: create-single-spa提供如下NPM包:

create-single-spa

Github project

核心CLI,调用了generator-single-spa

generator-single-spa

Github project

提示用户然后创建文件的Yeoman generator。主要通过create-single-spa CLI调用,但是如果你想定制化它,也可以被composed

webpack-config-single-spa

Github project

可分享可定制化的webpack配置,应用于公共模块和React single-spa应用。

安装

  1. npm install --save-dev webpack-config-single-spa webpack-merge
  2. # or
  3. yarn add --dev webpack-config-single-spa webpack-merge

用法

  1. const webpackMerge = require('webpack-merge');
  2. const singleSpaDefaults = require('webpack-config-single-spa');
  3. module.exports = webpackConfigEnv => {
  4. const defaultConfig = singleSpaDefaults({
  5. // The name of the organization this application is written for
  6. orgName: 'name-of-company',
  7. // The name of the current project. This usually matches the git repo's name
  8. projectName: 'name-of-project',
  9. // See https://webpack.js.org/guides/environment-variables/#root for explanation of webpackConfigEnv
  10. webpackConfigEnv,
  11. })
  12. return webpackMerge.smart(defaultConfig, {
  13. // modify the webpack config however you'd like to by adding to this object
  14. })
  15. }

webpack-config-single-spa-react

Github project

可分享可定制化的webpack配置,可将react的特定配置添加到 webpack-config-single-spa 中。

安装

  1. npm install --save-dev webpack-config-single-spa-react webpack-merge
  2. # or
  3. yarn add --dev webpack-config-single-spa-react webpack-merge

用法

  1. const webpackMerge = require('webpack-merge');
  2. const singleSpaDefaults = require('webpack-config-single-spa');
  3. module.exports = webpackConfigEnv => {
  4. const defaultConfig = singleSpaDefaults({
  5. // The name of the organization this application is written for
  6. orgName: 'name-of-company',
  7. // The name of the current project. This usually matches the git repo's name
  8. projectName: 'name-of-project',
  9. // See https://webpack.js.org/guides/environment-variables/#root for explanation of webpackConfigEnv
  10. webpackConfigEnv,
  11. })
  12. return webpackMerge.smart(defaultConfig, {
  13. // modify the webpack config however you'd like to by adding to this object
  14. })
  15. }

webpack-config-single-spa-ts

Github project

A shareable, customizable webpack config that adds typescript-specific configuration to webpack-config-single-spa. Note that webpack-config-single-spa-ts has a peerDependency on typescript.

Installation

  1. npm install --save-dev webpack-config-single-spa-ts webpack-merge
  2. # or
  3. yarn add --dev webpack-config-single-spa-ts webpack-merge

Usage

  1. const webpackMerge = require('webpack-merge');
  2. const singleSpaDefaults = require('webpack-config-single-spa-ts');
  3. module.exports = webpackConfigEnv => {
  4. const defaultConfig = singleSpaDefaults({
  5. // The name of the organization this application is written for
  6. orgName: 'name-of-company',
  7. // The name of the current project. This usually matches the git repo's name
  8. projectName: 'name-of-project',
  9. // See https://webpack.js.org/guides/environment-variables/#root for explanation of webpackConfigEnv
  10. webpackConfigEnv,
  11. })
  12. return webpackMerge.smart(defaultConfig, {
  13. // modify the webpack config however you'd like to by adding to this object
  14. })
  15. }
  1. const singleSpaTs = require('webpack-config-single-spa-ts');
  2. // Alternatively, you may modify a webpack config directly
  3. const myOtherWebpackConfig = {/* ... */}
  4. const finalConfig = singleSpaDefaults.modifyConfig(myOtherWebpackConfig)

webpack-config-single-spa-react-ts

Github project

A shareable, customizable webpack config that creates a webpack config that works with both react and typescript. Note that webpack-config-single-spa-react-ts simply merges the config from webpack-config-single-spa-react with that of webpack-config-single-spa-ts.

Installation

  1. npm install --save-dev webpack-config-single-spa-react-ts webpack-merge
  2. # or
  3. yarn add --dev webpack-config-single-spa-react-ts webpack-merge

Usage

  1. const webpackMerge = require('webpack-merge');
  2. const singleSpaDefaults = require('webpack-config-single-spa-react-ts');
  3. module.exports = webpackConfigEnv => {
  4. const defaultConfig = singleSpaDefaults({
  5. // The name of the organization this application is written for
  6. orgName: 'name-of-company',
  7. // The name of the current project. This usually matches the git repo's name
  8. projectName: 'name-of-project',
  9. // See https://webpack.js.org/guides/environment-variables/#root for explanation of webpackConfigEnv
  10. webpackConfigEnv,
  11. })
  12. return webpackMerge.smart(defaultConfig, {
  13. // modify the webpack config however you'd like to by adding to this object
  14. })
  15. }