Switching from angular.json to webpack-obfuscator

Offen
  • Stimmt etwas nicht?
#71 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
25/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
angular, javascript, typescript, webpack
Bereich
build-system, tooling

Rechercherichtung

Beginne mit der Angular-8-Build-Konfiguration in angular.json und dem Beispiel für custom-webpack.config.js, und reproduziere dann den Fehler '..getProjectMetadata' mit dem gemeldeten Setup. Prüfe, wie @angular-builders/custom-webpack den Browser-Builder integriert und wie webpack-obfuscator seine entry- und output-Konfiguration erwartet. Als abgeschlossen gilt die Aufgabe, wenn der Angular-Produktions-Build erfolgreich abgeschlossen wird und die Obfuscation-Konfiguration ohne diese Ausnahme angewendet wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Hello,

I'm very sorry to ask such a basic question but I need guidance. I've got currently in my angular.json for the build:

      "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "outputPath": "dist",
           "index": "src/index.html",
           "main": "src/main.ts",
           "polyfills": "src/polyfills.ts",
           "tsConfig": "src/tsconfig.app.json",
           "assets": [
             "src/favicon.ico",
             "src/assets",
             {
               "glob": "**/*",
               "input": "node_modules/ngx-monaco-editor/assets/monaco",
               "output": "/assets/monaco"
           }


           ],
           "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.min.css",
             "src/styles.css",
             "node_modules/angular-notifier/styles.css",
             "node_modules/primeicons/primeicons.css",
             "node_modules/primeng/resources/themes/nova-dark/theme.css",
             "node_modules/primeng/resources/primeng.min.css"

           ],
           "scripts": [
             "node_modules/jquery/dist/jquery.min.js",
             "node_modules/popper.js/dist/umd/popper.js",
             "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
         },
         "configurations": {
           "production": {
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }
             ],
             "optimization": true,
             "outputHashing": "all",
             "sourceMap": false,
             "extractCss": true,
             "namedChunks": false,
             "aot": true,
             "extractLicenses": true,
             "vendorChunk": false,
             "buildOptimizer": true
           }
         }
       },

This is fairly standard; we've not changed much. So firstly I install the custom webpack dependency:

npm i @angular-builders/custom-webpack -D

Then I have to configure the custom-webpack to include the obfuscation so I modify the above to the following:

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "replaceDuplicatePlugins": true
            },
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "/assets/monaco"
            }


            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/angular-notifier/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-dark/theme.css",
              "node_modules/primeng/resources/primeng.min.css"

            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },

I then reference the obfuscation file custom-webpack.config.js which is as follows:

// webpack.config.js
'use strict';

const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
    entry: {
        'main': "dist/main.js",
    },
    output: {
        path: 'dist',
        filename: '[name].obs.js' // output: abc.js, cde.js
    },
    plugins: [
        new JavaScriptObfuscator({
            rotateUnicodeArray: true
        }, [])
    ]
};

I'm on Angular 8.3.25 but this is giving me 'An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.'.

Again; I'm sorry if this is not specific to this tool but I'm unsure how to get from the angular.json I have now to the obfuscation detailed in the guide?

I'm happy to write this up in a detailed tutorial when done!

Vorherrschende Sprache
TypeScript
Sterne
930
Forks
92
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus javascript-obfuscator/webpack-obfuscator

Alle Issues in javascript-obfuscator/webpack-obfuscator

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.