2

任何人都可以帮助我吗？

如何仅使用 angular 8 构建一个 bundle.js？当我执行“npm run build”时，创建了很多 javascript 文件。（例如 main.js/runtime.js/polyfills.js/...）

我希望它们（main.js/runtime.js/polyfills.js/）都可以输出到bundle.js

这是我的packages.json：


{
  "name": "buy-me",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --build-optimizer --base-href /buyme/ --deploy-url /buyme/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^8.0.1",
    "@angular/animations": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "^3.1.3",
    "ngx-markdown": "^8.0.1",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.1",
    "@angular/cli": "^8.0.1",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.0.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "^3.4.5"
  }
}

我试过了，但是输出了 main.js、polyfills.js、runtime.js 等文件，我希望这些可以连接一个 bundle.js。

4

1 回答 1

0

使用 Angular 8，您不必将这些文件捆绑在一起。但是，如果您愿意，以下步骤将帮助您：

  1. 将concat包安装到您的项目中
  2. 将以下行添加到您package.json的“脚本”部分：
"concat:es-5": "concat -o ./dist/ng-test-proj/bundle-es5.js ./dist/ng-test-proj/main-es5.*.js ./dist/ng-test-proj/polyfills-es5.*.js ./dist/ng-test-proj/runtime-es5.*.js",
"concat:es-2015": "concat -o ./dist/ng-test-proj/bundle-2015.js ./dist/ng-test-proj/main-es2015.*.js ./dist/ng-test-proj/polyfills-es2015.*.js ./dist/ng-test-proj/runtime-es2015.*.js",
"build:prod": "ng build -c production",
"build:prod:bundle": "npm run build:prod && npm run concat:es-5 && npm run concat:es-2015",

现在您可以在终端中执行“npm run build:prod:bundle”，您将获得两个捆绑文件。作为最后一步，应该更新您的 HTML 文件（如果您想使用它们而不是原始文件，它应该具有指向这些捆绑包的链接）。

于 2019-08-06T19:10:55.227 回答