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.
I have a TypeScript project, and the project structure is organized not unlike a typical Maven Java project. Below is more or less what the project structure looks like.
.
├── gulpfile.js
├── index.html
├── package.json
├── src
│ ├── entity
│ │ ├── car.ts
│ │ ├── animal.ts
│ └── sevice
│ ├── dao
│ │ ├── cardao.ts
│ │ ├── animaldao.ts
│ └── validator
│ ├── carvalidator.ts
│ └── animalvalidator.ts
├── test
│ ├── entity
│ │ ├── car.spec.ts
│ │ ├── animal.spec.ts
│ └── service
│ └── dao
│ ├── carvalidator.spec.ts
│ └── animalvalidator.spec.ts
├── tsconfig.json
└── webpack.config.js
I am able to generate a single *.js file for commonjs/webpack, system, and amd.
for commonjs/webpack, I use tsc + tsconfig.json and then webpack + webpack.config.js to generate a single file, bundle.js.
for system, I simply use the gulp-typescript task with module set to system to generate a single file, lib-system.js.
for amd, again, I use gulp-typescript with module set to amd to generate a single file, lib-amd.js.
However, after I load these single *.js files into the browser (with webpack I just use <script> tags and with the other I use SystemJS), I noticed that I have to instantiate my objects as follows.
var c = new car.Car('chevy', 'traverse', 2017);
var a = new animal.Animal('cat');
I don't like the fact that I am repeating myself in the code car.Car or animal.Animal. Is there a way to make it so that I can do the following without altering the project structure?
var c = new entity.Car('chevy', 'traverse', 2017);
var a = new entity.Animal('cat');
Of course I can just create a file, entity.ts and define both Car and Animal (or all entities, which there are a lot) in that one file. But that seems rather silly to me to have one long file with a lot of classes just to group the modules logically together.
I ventured into naively merging all the *.ts files into one uber ts file, but that doesn't really work because
there's a lot of imports, and you'd have to remove them (I don't know if gulp-concat can do this operation or if I need another package piped into the process to do so)
sub-classes must be defined after super-classes (as gulp-concat doesn't care about this rule when it concatenates files)
So my question is if is possible to logically group my classes (by function, e.g. entity, dao, validator, etc...) into modules instead of the default grouping (by files, one file is actually one module, I believe)?
I would expect some tools to make this possible, haven't found any solutions yet.
One solution is indeed to create a module for grouping, src/entity.ts, and re-export classes from it:
export { Car } from './entity/car';
export { Animal } from './entity/animal';
Another possibility is to use rollup.js which seems to be capable of combining several compiled modules into one, but it's for javascript only, and I don't have any experience with it.
My app directory structure is:
App
├── client
├── lib
│ ├── _constants.js
│ ├── config
│ └── router
├── modules
│ ├── answers
│ └── questions
├── node_modules
│ └── bcrypt
├── public
│ └── imgs
├── server
│ ├── lib
│ ├── roles
│ └── startup
└── settings-example.json
In my _constants.js, I have defined some global variables, e.g. Schemas = {} which I intend to use in the modules > module_name> lib > collections.js or modules > module_name> lib > methods.js
But the global variables are not found in the modules' collections.js. Here's the error I get:
W20160323-21:38:58.977(-7)? (STDERR) ReferenceError: Schemas is not defined
W20160323-21:38:58.977(-7)? (STDERR) at modules/answers/lib/collections.js:22:1
W20160323-21:38:58.977(-7)? (STDERR) at modules/answers/lib/collections.js:89:1
By my understanding, the global variables in the APP/lib/_constants.js file should have been loaded before the deeper modules/module_name/lib/collections.js got loaded, right?
But that's obviously not happening. What am I doing wrong?
Thanks for your help!
Read the "file load order" section from Structuring your application:
There are several load ordering rules. They are applied sequentially to all applicable files in the application, in the priority given below:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
The way this is implemented, a deeply nested lib is loaded before a less deeply nested lib, which explains your problem. Here are some options:
Don't use lib in your deep paths. E.g. rename the path like modules/questions/stuff/collections.js.
Move your modules into packages.
Upgrade to meteor 1.3 (still pre-release as of this writing) and start using the explicit export/import module syntax.
I have a directory structure that looks like this:
├── index.html
├── scripts
│ ├── accordion
│ │ └── accordion.js
│ └── console
│ └── test.js
I want accordion.js and test.js to compile to a single minified file scripts/site.js. I've done this before with gulp but I'm trying to use IntelliJ. I already have YUI Compressor and it minifies the individual files no problem. Thank you!
should be possibile with file watchers. check this minifying javascript with idea 14