I'm writing react application with given structure (simplified):
src/
├── containers/
│ ├── ...
│ ├── ...
│ ├── ...
│ └── ...
├── SourceResolver/
│ └── SourceResolver.js
│
└── App.js
SourceResolver.js is a class which contains one method. This method is used in files which are localized into containers folder. I simply create object of this class and then call defined method:
new SourceResolver().getSource();
I don't want to minify this file (or even directory). I want to leave this file like it is in production build (as separte file). Leter if someone would like to change this method it will be possible even in production build.
How can achieve this? I tried to exlude this file/directory in webpack file, but with no success. Is it even possible?
Here is my webpack file https://pastebin.com/xS6QkKzb
Here is my changed webpack file, I tried to add exclude everyhere because I don't know why it doesn't work. https://pastebin.com/6brcNRq3
If one wants to jump start a project in Node.js with express. one would use express-generator. After creating a new project your file tree will look like this
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
One thing that stood out for me is that to run the app you need to do node bin/www or a predefined shortcut npm run. My question is why would one use the www the way it is and not add a .js extension and remove #!/usr/bin/env node from the top of the file? Are there any benefits of doing it this way or is it a personal preference?
Let's look at the first line of the bin/www file:
#!/usr/bin/env node
This shebang tells the *nix operating system how to interpret the file if you try to run it as a program.
So this file can be started as a program. And in Linux traditionally executable files do not have an extension.
Premise
Let's say I have two different AMD-based AngularJS apps, each of them with their own sets of controllers, directives, services, etc. Each of them are bundled in their own dist/{app-name}.min.js and loaded in <script> tags in the same HTML page (this is all in the context of a CMS that then contains these apps among other things)
Now the apps end up sharing some of the services, directives, and vendor libraries like angular itself, moment, jQuery, etc, so I've made another folder for all of these resources, which results in a bundle that will be added to the page before the js bundles of the apps:
<script src="/some-path/dist/shared-resources.min.js"></script>
<script src="/some-path/dist/first-app.min.js"></script>
<script src="/some-path/dist/second-app.min.js"></script>
This is the resulting folder structure:
.
├── shared-resources/
│ ├── dist/
│ ├── src/
│ │ └── common/
│ │ ├── directives/
│ │ ├── modules/
│ │ ├── services/
│ │ └── vendor/
│ └── build.js
│
├── first-app
│ ├── dist/
│ ├── src/
│ │ ├── first-app/
│ │ │ ├── controllers/
│ │ │ ├── modules/
│ │ │ ├── services/
│ │ │ ├── directives/
│ │ │ └── app.js
│ │ └── first-app.js
│ └── build.js
│
└── second-app
├── dist/
├── src/
│ ├── second-app/
│ │ ├── controllers/
│ │ ├── modules/
│ │ ├── services/
│ │ ├── vendor/
│ │ └── app.js
│ └── second-app.js
└── build.js
This is an example of what the build.js file for the common modules looks like
({
baseUrl: 'src',
removeCombined: true,
out: 'dist/shared-resources.min.js',
paths: { // forcing a `common/{modulename}` convention
'common/jquery': 'common/vendor/jquery.min',
'common/moment': 'common/vendor/moment.min',
'common/angular': 'common/vendor/angular/angular.min',
},
shim: {
'common/angular': {
exports: 'angular',
}
},
include: [
'common/modules/vendors', // Just a bundle of every vendor modules
'common/directives/common-directive',
'common/services/common-service'
],
})
Now my intention was to have all the shared modules being namespaced with common/, so each of the apps could require common/angular, common/directives/common-directive, and so on, and then exclude the common path when creating their bundle (since all the common modules are already present in the shared-resources.js bundle), for example:
// first-app/src/first-app/controllers/app-controller.js
define([
'first-app/modules/controllers',
'first-app/services/app-service',
'common/services/common-service'
], function (controllers) {
'use strict';
controllers.controller('AppController', ['CommonService', 'AppService', function (CommonService, AppService) {
CommonService.call();
AppService.call();
}]);
});
// first-app/build.js
({
baseUrl: 'src',
out: 'dist/first-app.min.js',
paths: {
'common': 'empty:'
},
name: 'first-app',
deps: ['first-app/app']
})
Problem
The problem is how these two apps, which again are both loaded on the page (this can't be avoided), are supposed to correctly look up these common modules.
Given that each of the apps have obviously a different baseUrl, they are put in different RequireJS contexts, otherwise the baseUrl of the second app would override the baseUrl of the first one, causing the incorrect loading of its modules:
// first-app/src/first-app.js
require.config({
context: 'first-app',
baseUrl: 'first-app/src',
})(['fist-app/app']);
// first-app/src/second-app.js
require.config({
context: 'second-app',
baseUrl: 'second-app/src',
})(['second-app/app']);
But putting them in context then causes the look up for the common modules to fail, as the modules are looked in the baseUrl of the context. Actually this happens only for the second app (second in order of loading), while the first app to be included in the page can load the common modules fine
Question
So how should I make the apps to correctly share the common modules? Am I approaching this wrong? Should I use something else than RequireJS?
The context feature of RequireJS is really meant to be used to handle a case where you have to load two conflicting applications on the same page and the conflict cannot be resolved otherwise. The way you've written your code so far may have led you to want to have two baseUrl values, but there is nothing in your question that indicates that you must have two baseUrl values. There are ways to avoid it:
Modules that are part of a logical set of modules should load each other with relative paths. For instance, the module you give as example could be:
// first-app/src/first-app/controllers/app-controller.js
define([
'../modules/controllers',
'../services/app-service',
'common/services/common-service'
], function (controllers) {
paths can be set to make it look like a module is directly under baseUrl even if it is not. You could have:
paths: {
'first-app': 'first-app/src'
'second-app': 'second-app/src'
}
and yes, loading first-app/app will work. RequireJS will transform the path to first-app/src/app.js.
I used Express generator to create node application. Directory structure looks like the following:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── node_modules
│ └── jquery
│ └── dist
| |___jquery.min.js
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
In my index.jade file i try to reuse jquery.min.js from node_modules, instead use url to web source:
doctype html
html
head
link(rel='stylesheet', href= '/stylesheets/style_monit.css')
body
#container
.row
.col-sm-4(style='background-color:lavender;') .col-sm-4
.col-sm-4(style='background-color:lavenderblush;') .col-sm-4
.col-sm-4(style='background-color:lavender;') .col-sm-4
.col-md-4
textarea#inData.form-control(style='background:#222; color:#00ff00;', rows='8')
script(type='text/javascript' src='../node_modules/jquery/dist/jquery.min.js')
css file loads great, but in Chrome console i have error that
GET http://localhost:3000/node_modules/jquery/dist/jquery.min.js
NOT FOUND
I believe the problem is that the node_modules directory is private and shouldn't be exposed to the client. Only static files in the public directory can be served. See this Stack Overflow answer for more information.
I'm trying to setup a glob array for my javascript concat build task in gulp. The directory structure looks as follows:
├── about
│ └── about.js
├── assets
├── contact
├── core
│ ├── navbar
│ │ ├── navbar.js
│ │ └── navbar.test.js
│ ├── routing.js
│ ├── routing.test.js
│ ├── utils.js
│ └── utils.test.js
├── generated
│ ├── footer.js
│ ├── header.js
│ └── templates.js
├── home
├── app.js
└── config.js
The order of the files is important:
generated/header.js
app.js
any of the *.js files, except those here below
generated/templates.js
generated/footer.js
I've wildly tried all kinds of wildcards combination, but the globbing isn't strong with me.
var inputFiles = [
'generated/header.js',
'app.js',
'!(generated)**/*.js', // <=---- ???
'generated/templates.js',
'generated/footer.js',
'!**/*.test.js'
];
So how do I include all *.js files except those from a subdirectory?
Thanks.
The best I came up with:
var gulp = require('gulp');
var tap = require('gulp-tap');
gulp.task('default', function() {
return gulp.src([
'generated/header.js',
'app.js',
'*.js',
'./!(generated)/**/*.js', // <- All subdirs except 'generated'
'generated/{templates,footer}.js',
'!**/*.test.js',
'!node_modules/**'
]).pipe(tap(function(file) {
console.log(file.path);
}));
});
Running it:
∴ glob-test gulp
[20:07:51] Using gulpfile ~/Desktop/glob-test/gulpfile.js
[20:07:51] Starting 'default'...
/Users/heikki/Desktop/glob-test/generated/header.js
/Users/heikki/Desktop/glob-test/app.js
/Users/heikki/Desktop/glob-test/config.js
/Users/heikki/Desktop/glob-test/gulpfile.js
/Users/heikki/Desktop/glob-test/about/about.js
/Users/heikki/Desktop/glob-test/core/routing.js
/Users/heikki/Desktop/glob-test/core/utils.js
/Users/heikki/Desktop/glob-test/core/navbar/navbar.js
/Users/heikki/Desktop/glob-test/generated/templates.js
/Users/heikki/Desktop/glob-test/generated/footer.js
[20:07:51] Finished 'default' after 326 ms
The main trick is avoiding the "!" character at the beginning of glob when including files.
https://github.com/isaacs/minimatch#comparisons-to-other-fnmatchglob-implementations
"If the pattern starts with a ! character, then it is negated."
ps. Placement of the negated globs doesn't matter. They are always moved to the end behind the scenes.