Switching from angular.json to webpack-obfuscator

Aberta
  • Algo errado?
#71 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
25/100
Tipo de issue
Bug
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
angular, javascript, typescript, webpack
Domínio
build-system, tooling

Direção de pesquisa

Comece pela configuração de build do Angular 8 em angular.json e pelo exemplo de custom-webpack.config.js; em seguida, reproduza o erro '..getProjectMetadata' usando a configuração relatada. Verifique como @angular-builders/custom-webpack integra o browser builder e como webpack-obfuscator espera sua configuração de entry e output. Está concluído quando o build de produção do Angular é concluído e a configuração de ofuscação é aplicada sem essa exceção.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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!

Linguagem predominante
TypeScript
Estrelas
930
Forks
92
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de javascript-obfuscator/webpack-obfuscator

Todas as issues de javascript-obfuscator/webpack-obfuscator

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.