StackBlitz是一个WebIDE,可以在浏览器里使用SAP Spartacus创建电商网站。
简要步骤如下:

在package.json里手动添加Spartacus依赖,下图是添加前StackBlitz创建Angular应用后默认生成的Angular依赖:

下图是完整依赖,源代码附在后面供大家参考:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | { "name": "mystore", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.1.12", "@angular/common": "~9.1.12", "@angular/compiler": "~9.1.12", "@angular/core": "~9.1.12", "@angular/forms": "~9.1.12", "@angular/localize": "~9.1.12", "@angular/platform-browser": "~9.1.12", "@angular/platform-browser-dynamic": "~9.1.12", "@angular/router": "~9.1.12", "@angular/service-worker": "~9.1.12", "@ng-bootstrap/ng-bootstrap": "^6.0.0", "@ng-select/ng-select": "^4.0.0", "@ngrx/effects": "~9.1.0", "@ngrx/router-store": "~9.1.0", "@ngrx/store": "~9.1.0", "@spartacus/assets": "^2.1.0", "@spartacus/core": "^2.1.0", "@spartacus/storefront": "^2.1.0", "@spartacus/styles": "^2.1.0", "bootstrap": "4.2.1", "i18next": "^19.3.4", "i18next-xhr-backend": "^3.2.2", "ngx-infinite-scroll": "^8.0.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.12", "@angular/cli": "~9.1.12", "@angular/compiler-cli": "~9.1.12", "@spartacus/schematics": "^2.1.0", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" } } |
依赖安装完毕后,就可以在StackBlitz的预览窗口,查看生成的Spartacus前台页面了:

