Currently, I am developing a web application using AngularJS and Browserify to bundle my JavaScript files into a single package for use on the webpage. My project structure looks something like this:
app
|-index.html
|-index.js
|-bundle.js
|-components
|-module1
|-index.js
|-module1.directive.js
|-module1.html
As the bundled JavaScript file ends up in the app folder, my directives end up with lengthy paths like:
module.exports = angular.module('module1.directive', [])
.directive('moduleDirective', function() {
return {
restrict: 'E',
templateUrl: './components/module1/module1.html'
);
});
While this setup works fine, it can become cumbersome as the project grows more complex, especially when multiple developers are involved. Is there a way for me to use a relative path in the templateUrl so that Browserify can correctly resolve it during bundling?
EDIT: It would be helpful if I could access the original file path of the script being bundled within the module itself. However, I am unsure if Browserify supports this feature.