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
Related
I develop my website using Nuxt3 and deploy it following the instructions here: https://v3.nuxtjs.org/getting-started/deployment#static-hosting
I successfully get dist and node server hosted web (running npx serve -o dist) also works well, But directly opening index.html in brower leads to a webpage rendered without any CSS and images.
I checked the generated html and found the assets path is like:
<link rel="modulepreload" href="/_nuxt/entry-1f8b74a8.mjs" as="script" crossorigin>
while my dist folder looks like:
dist
├── _nuxt
│ ├── entry-1f8b74a8.mjs
│ ├── entry.ff9830ad.css
│ ├── index-a3c0d3be.mjs
│ ├── index-e5b9c659.mjs
│ ├── index.072137e3.css
│ ├── lcdp-c28417d3.mjs
│ ├── manifest.json
│ ├── paper-b4b64fe8.mjs
│ └── paper.6897f003.css
├── imgs
│ ├── bg1.png
│ ├── bg2.png
│ └── other images...
└── index.html
I guess maybe the reason is that the assets path is wrong? What is the correct way to do the static website generation using nuxt3?
OP achieved to properly deploy the app on Vercel, it's better than Github Pages on every way anyway.
In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│ ├── simple-lib.umd.js
│ ├── simple-lib.umd.js.map
│ ├── simple-lib.umd.min.js
│ └── simple-lib.umd.min.js.map
├── esm2015
│ ├── lib
│ │ ├── simple-lib.component.js
│ │ ├── simple-lib.module.js
│ │ └── simple-lib.service.js
│ ├── public_api.js
│ └── simple-lib.js
├── esm5
│ ├── lib
│ │ ├── simple-lib.component.js
│ │ ├── simple-lib.module.js
│ │ └── simple-lib.service.js
│ ├── public_api.js
│ └── simple-lib.js
├── fesm2015
│ ├── simple-lib.js
│ └── simple-lib.js.map
├── fesm5
│ ├── simple-lib.js
│ └── simple-lib.js.map
├── lib
│ ├── simple-lib.component.d.ts
│ ├── simple-lib.module.d.ts
│ └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json
While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0
As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview
While trying to publish Angular components on npm, I am not quite sure which folders and files should be included in the versioning process and which should be in the .gitignore.
I use the Angular CLI for publishing. The main code is in ./projects/nls-ngx-module/src/** and for transpiling I use the native angular command ng build --prod from inside the project folder. Inside dist/ a new folder arrives with the project title. Fine.
After transpiling, another node_modules folder is added to the project folder, which is not ignored by default. It only contains a .cache folder with subfolders and files. And that irritates me, because in other sample projects they do not appear, but they have not been ignored manually in the .gitignore either.
Folder structure
├── ...
├── projects
│ └── nls-ngx-module
│ ├── karma.conf.js
│ ├── ng-package.json
│ ├── ng-package.prod.json
│ ├── package.json
│ ├── src
│ │ ├── lib
│ │ │ ├── ...
│ │ ├── public_api.ts
│ │ └── test.ts
│ ├── tsconfig.lib.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── src
│ ├── app
│ │ ├── ...
│ ├── assets
│ ├── browserslist
│ ├── environments
│ │ ├── ...
│ ├── ...
├── ...
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
package-lock.json
# System Files
.DS_Store
Thumbs.db
Examples taken from:
mrsan22/NgxMatTypeahead
faxemaxe/ngx-cli-lib-demo
No, no modification of the .gitignore file has to be done. The ng build command was executed in the wrong directory.
Do not run ng build --prod or any similiar ng build command outside the root directory of the application. The node_modules folder is only created inside the projects directory when you run the ng build command inside the subfolders of the projects diretory.
Note
The ng build command distributes all necessary dependencies listed inside the package.json. Therefore there has to be a node_modules folder to bundle the built library correctly.
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.