How to exclude vendor javascript from babel-loader in NextJS - next.js

Here I have a javascript file that's the result of bundling and obfuscation. The vendor doesn't provide it as an npm package, but in a zipfile via email.
If it were an npm package, I think it would work fine because I guess NextJS build will not try to run babel on node_modules (default exclude for babel-loader).
If I put it at public/acme.js that would be fine for any html including it. But for our project's typescript code, importing it from ../public seems odd, and if it's located anywhere else it will get processed by babel, which seems odd since it already has been.
There's an npm feature to install a package from local files, however it doesn't seem like that would work in our CI pipeline.
Is there a way to add paths to the exclude part of the babel-loader rule? I see in the doc how the option.defaultLoaders.babel is used as an input to create another rule, but it's not clear that this could be mutated, or if it supports an exclude.

Related

Process "loading" SCSS via Aurelia's CLI separately from bundle

Using Aurelia CLI with the built-in bundler and SystemJS ...
I have two SCSS files. One is for the loading indicator/page as Aurelia is bootstrapped and should be excluded from the bundle and available in my /dist folder as plain CSS (not bundled at all). I've accomplished the first part (excluding it from app-bundle), but how can I configure au build / aurelia.json to still process loading.scss and put the resulting CSS in /dist.
Edit: I can/will just update the appropriate gulp task myself, but was not sure if there was a better way.
I ended up altering the Gulp tasks to do what I needed to do. I verified on Aurelia's Gitter that this is the correct approach.

Laravel Mix - Public CSS Keeps overriding

I'm using Laravel mix in my project. I need to alter the app.css in the public folder, whenever i comment or delete styles and run npm run dev the styles come back. I need them gone. How do I permanently stop this?
The files in public generated by npm run [production|dev] are compiled versions of the application's source files. These files should be treated as immutable: they are written once during the compilation process and never to be written to again. Any changes you need to make to the output should be done in the compilation process, whether that's by modifying the source files or by adjusting the way that the compilation process works. Every time you run npm run dev it replaces the old files with the new.
You can find the source files for your application in resources/assets. If you're not sure how to make a specific change please create a new question outlining the problem you're having, e.g: "I want to remove this style from my app.scss but I don't know how".

How to include only specific parts of UI Bootstrap using Grunt

I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).

How to make Meteor ignore files?

Is there some specific folder in Meteor file structure which is simply ignored by Meteor? (meteor bundle and meteor deploy etc)
Or better yet: is there a kind of .meteorignore file where we can list files for Meteor to ignore?
There's no such file as .meteorignore yet.
Currently the only reliable way to hide a file from Meteor is to make it hidden (add a dot to the beginning of name). You can hide the whole directory, which is useful if you need specific filenames for things like Grunt tasks.
For example if you create a directory called .hammerTime, then Meteor can't touch this.
Update:
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
You can use them in any directory of your project and are fully integrated with the file watching system.

How to exclude files from Meteor's generation of app?

Tl;dr : Is there an equivalent in meteor to .gitignore?
Yes, I am aware of using a leading '.' in the directory name to get meteor to exclude it. But using leading dot is not a solution in this case. Read below to understand.
Longer:
I would like to use Bower.io to install various browser plugins.
Ideally, I run bower in the client subdirectory. Bower does its thing creating the bower_components directory and pulls down the plugin (pick a random jquery plugin for example).
Many plugins include example html, demo css files, etc. to show how to use the plugin.
Unfortunately, Meteor wants to include all that stuff in the application. Which unsurprisingly causes problems.
My current solution is to have bower.io run in the project's parent directory. This is not ideal as I have to copy js/css files over from the bower directory to the meteor client directory. (yes, I could use soft links but then the files would be missing when pushing to production).
With only a few client plugins / css packages this is becoming quite annoying.
NOTE: Renaming files/directories retrieved by bower.io to have a leading '.' or using bower in a dotted subdirectory helps only marginally. I would then have to manually include the files needed.
Is this possibly a duplicate of How to exclude directories/files from Meteor's bundler?
If you want to define the way you name your files, you could try including a certain regex to match in the meteor bundler. Otherwise, maybe it's something that needs to be implemented on a framework level.
I also found this tutorial by Tri on integrating meteor and bower: http://tridnguyen.com/articles/meteor-and-bower/. Tri defines a new meteor package to specify the exact files required on the client.
The best solution, however, is move away from Bower as Meteor offers its own package manager at a framework level. Including the front end files that you need using Meteor packages would be the more productive solution in the long run, especially as the framework changes.

Resources