title: Obfuscating js files with grunt-obfuscator: Uncaught ReferenceError: require is not defined
body: <p>I was searching over the internet about how to obfuscate my JavaScript code and after use uglify that convert all my files minified but not obfuscated I decided to use <a href="https://www.npmjs.com/package/grunt-obfuscator" rel="nofollow noreferrer">grunt-obfuscator</a></p>
  <p>After make this configuration on my simple project:</p>
  <p><strong>Gruntfile.js</strong></p>
  <pre><code>  module.exports = function (grunt) {
  
    grunt.loadNpmTasks('grunt-obfuscator');
  
    grunt.initConfig({
      connect: {
        server: {
          options: {
            port: 9000,
            base: 'app/'
          }
        }
      },
      watch: {
        project: {
          files: ['app/**/*.js', 'app/**/*.html', 'app/**/*.json', 'app/**/*.css'],
          options: {
            livereload: true
          }
        }
      },
      obfuscator: {
        files: [
          'app/js/app.js',
          'app/js/controllers.js'
        ],
        entry: 'app/js/app.js',
        out: 'app/js/obfuscated.js',
        strings: true,
        root: __dirname
      }
    });
  
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    
  
    grunt.registerTask('default', ['obfuscator', 'connect', 'watch']);
  
  };
  </code></pre>
  <p><strong>My app.js</strong></p>
  <pre><code>(function () {
  
      var app = angular.module('myapp', [
              'ngRoute',
              'myapp.controllers'
          ]);
  
      app.config(['$routeProvider', function ($routeProvider) {
  
          $routeProvider
              .when('/', {
                  templateUrl: 'views/home.html'
              })
              .otherwise({
                  redirectTo: '/'
              });
      }]);
      
  })();
  </code></pre>
  <p><strong>My controller.js</strong></p>
  <pre><code>(function() {
      angular.module('myapp.controllers', [])
          .controller('AppController', ['$scope',
           function ($scope) {
              $scope.name = &quot;Test123&quot;;
          }]);
  })();
  </code></pre>
  <p>After execute <strong>grunt</strong> my <code>obfuscated.js</code> is really hard to read, which is really great. So I'm enter to my localhost which is loading now the <code>obfuscated.js</code> file but I'm getting this error:</p>
  <pre><code>Uncaught ReferenceError: require is not defined
  </code></pre>
  <ol>
  <li>What am I missing?</li>
  </ol>
  <p><strong>My obfuscated.js</strong></p>
  <pre><code>!function(a,b){function c(b,d){var e,f;if(&quot;\x2e&quot;!=b[0]&amp;&amp;&quot;\x2f&quot;!=b[0])return a(b);if(d=d||&quot;\x72\x6f\x6f\x74&quot;,e=c.resolve(b),!e&amp;&amp;/\.json$/i.test(b))return a(&quot;\x2e\x2f&quot;+c.basename(b));if(f=c.cache[e],!f)try{return a(b)}catch(g){throw Error(&quot;\x66\x61\x69\x6c\x65\x64\x20\x74\x6f\x20\x72\x65\x71\x75\x69\x72\x65\x20\x22&quot;+b+&quot;\x22\x20\x66\x72\x6f\x6d\x20&quot;+d+&quot;\n&quot;+g.message+&quot;\n&quot;+g.stack)}return f.exports||(f.exports={},f.call(f.exports,f,f.exports,c.relative(e))),f.exports}c.cache={},c.basename=a(&quot;\x70\x61\x74\x68&quot;).basename,c.resolve=function(b){var d,e,f;if(&quot;\x2e&quot;!=b[0])return a.resolve(b);for(d=[b,b+&quot;\x2e\x6a\x73&quot;,b+&quot;\x2f\x69\x6e\x64\x65\x78\x2e\x6a\x73&quot;,b+&quot;\x2e\x6a\x73\x6f\x6e&quot;,b+&quot;\x2f\x69\x6e\x64\x65\x78\x2e\x6a\x73\x6f\x6e&quot;],e=0;f=d[e];e++)if(c.cache[f])return f},c.register=function(a,b){c.cache[a]=b},c.relative=function(a){function b(b){var d,e,f,g,h;if(&quot;\x2e&quot;!=b[0])return c(b);for(d=a.split(&quot;\x2f&quot;),e=b.split(&quot;\x2f&quot;),d.pop(),f=0,g=e.length;g&gt;f;f+=1)h=e[f],&quot;\x2e\x2e&quot;==h?d.pop():&quot;\x2e&quot;!=h&amp;&amp;d.push(h);return c(d.join(&quot;\x2f&quot;),a)}return b.resolve=c.resolve,b.cache=c.cache,b},c.register(&quot;\x2e\x2f\x61\x70\x70\x2f\x6a\x73\x2f\x61\x70\x70\x2e\x6a\x73&quot;,function(a,b,c){!function(){var a=angular.module(&quot;\x6d\x79\x61\x70\x70&quot;,[&quot;\x6e\x67\x52\x6f\x75\x74\x65&quot;,&quot;\x6d\x79\x61\x70\x70\x2e\x63\x6f\x6e\x74\x72\x6f\x6c\x6c\x65\x72\x73&quot;]);a.config([&quot;\x24\x72\x6f\x75\x74\x65\x50\x72\x6f\x76\x69\x64\x65\x72&quot;,function(a){a.when(&quot;\x2f&quot;,{templateUrl:&quot;\x76\x69\x65\x77\x73\x2f\x68\x6f\x6d\x65\x2e\x68\x74\x6d\x6c&quot;}).otherwise({redirectTo:&quot;\x2f&quot;})}]),c.extensions[&quot;\x2e\x73\x65\x72\x76\x65\x72\x2e\x63\x6f\x6e\x74\x72\x6f\x6c\x6c\x65\x72\x2e\x6a\x73&quot;]=c.extensions[&quot;\x2e\x6a\x73&quot;],c.extensions[&quot;\x2e\x73\x65\x72\x76\x65\x72\x2e\x6d\x6f\x64\x65\x6c\x2e\x6a\x73&quot;]=c.extensions[&quot;\x2e\x6a\x73&quot;],c.extensions[&quot;\x2e\x73\x65\x72\x76\x65\x72\x2e\x72\x6f\x75\x74\x65\x73\x2e\x6a\x73&quot;]=c.extensions[&quot;\x2e\x6a\x73&quot;]}()}),c.register(&quot;\x2e\x2f\x61\x70\x70\x2f\x6a\x73\x2f\x63\x6f\x6e\x74\x72\x6f\x6c\x6c\x65\x72\x73\x2e\x6a\x73&quot;,function(){!function(){angular.module(&quot;\x6d\x79\x61\x70\x70\x2e\x63\x6f\x6e\x74\x72\x6f\x6c\x6c\x65\x72\x73&quot;,[]).controller(&quot;\x41\x70\x70\x43\x6f\x6e\x74\x72\x6f\x6c\x6c\x65\x72&quot;,[&quot;\x24\x73\x63\x6f\x70\x65&quot;,function(a){a.name=&quot;\x54\x65\x73\x74\x31\x32\x33&quot;}])}()}),b.exports=c(&quot;\x2e\x2f\x61\x70\x70\x2f\x6a\x73\x2f\x61\x70\x70\x2e\x6a\x73&quot;)}(require,module);
  </code></pre>
  <p><strong>UPDATE</strong>
  There is no answer for this question since this plugin is not created for angularjs, only for Node.js. And the creator has not the minimal intention to make it for angular js. However it is a cool tool</p>