How to define relative dependency with brunch - javascript

Brunch allows for specifying the concatentation order in the JS processing via before and after.
I have the following dependency order:
some bower components
a setup file (setup.js)
more JS files
so basically the setup.js file needs the bower components to be there, but it must be loaded before other JS files.
If I put setup.js in the before list, it is included before the bower components.
How can I make sure setup.js gets included right between my bower components/vendor libs and my own JS.

before: [
'bower_components/**/*',
'setup.js'
]

Related

How to specify that Nuxt don't clear out generation directory target in Laravel?

I'm building a mini-app using Laravel and Nuxt.
My directory structure is organized as follows:
backend/
... LARAVEL FILES ...
frontend/
... NUXT FILES ...
My nuxt.config.js has the following line
{
...
generate: {
"dir": "../backend/public"
}
}
Basically, I'm trying to generate a Nuxt SPA into Laravel's public directory.
I'm use yarn generate to generate the files.
However, this clears out the entire backend/public directory and removes Laravel files.
robots.txt
index.php
favicon.ico
I don't want to remove these files since it's the index.php that loads Laravel I guess.
Is it possible to specify that Nuxt.js do not remove these three files and just output the folder there without deleting these three files.
My alternative option is to create a bash script which temporarily moves the three files on another directory - say backend/build-temp - and then copies them back to the backend/public after Nuxt generates the SPA. However, I think this will add another overhead to the building process. What do you think of this?

Merge a third party javascript file into webpack bundle?

How can I merge a third party javascript file into my webpack bundle without getting checked on modules etc?
Because my third party javascript file is already bundled.
Well, the ideal would be for it to be bundled together, but you can work around this problem.
First, make sure it is imported somewhere on your dependency tree (webpack only knows about your file if it is imported).
Now, to be able to use external files, you have to use the external configuration.
For eg:
module.exports = {
//...
externals: {
jquery: 'jQuery'
}
};
States to webpack that this is going to be available as an external resource when this application is loaded.
Now you can add your already bundled file to your index.html and serve to the user.

How do I include a JS file from a node_module in my view in Roots?

I'm using roots (http://roots.cx) and I want to include a library from a node_module in my page. I've npm install foo and the library is on disk.
I've tried adding foo to the extensions in app.coffee and restarted the watcher but the path it's rendering is to the node_modules folder which does not resolve from the browser.
extensions: [
js_pipeline(files: 'node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
and in the page source I get
<script src='node_modules/foo/lib/foo.js'></script>
What is the correct way to include a library from a node module?
Try this instead with the ./ since it's only a file and not a module, like this:
extensions: [
js_pipeline(files: './node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
Otherwise try to extract or copy the file from the node_modules and put it in a separate folder

Why does r.js combine and minify JS, then copy all the files to output dir?

I've been working with the RequireJS optimizer to create multiple optimized JS files for my project and have come across a problem that I’ve found mentioned in other posts but have not found a solution for.
When using r.js to optimized a single file, it pulls all the JS dependency into single file and drops it into the file specified by the “out” property in the build file. However, when trying to create two optimized files (i.e. multipage project using the ‘modules’ property), r.js creates two nicely optimized files but then drops ALL folders and files from the appDir into the output directory. That is, it pulls together and minifies all JS dependencies but then copies the individual files into the output directory.
I realize that r.js is not intended to be a deployment tool so is this by design or is there a way to tell r.js to not copy dependent files and directories into the output directory.
Yes, in your r.js build file, set the removeCombined option to true in order to preserve only the modules you specified to the output location.
{
...
//If set to true, any files that were combined into a build bundle will be
//removed from the output folder.
removeCombined: true,
...
}
See the r.js documentation's example build file.

Using one RequireJS project within another RequireJS project

I have a RequireJS project I am working on with the following structure:
Project/
index.html
src/
main.js
projectcomponent.js
lib/
require.js
main.js is the entry point of the Require application and has the following require.config inside it:
require.config
baseUrl: "./"
main.js returns an object.
I want to use this entire project as a module inside another RequireJS project. I attempted to use r.js (the RequireJS optimisation tool) to reduce the project to a single file, which worked - but as it relied on RequireJS, its config conflicted with the config of the parent project I wanted to use this project as a module for.
How can I use one RequireJS project as a module inside another RequireJS project?
You can get round this by using almond (https://github.com/jrburke/almond) to replace the require.js dependency, making the first project a fully encapsulated single file.
There's some further explanation and relevant links on the RequireJS site: http://requirejs.org/docs/faq-optimization.html#wrap

Categories

Resources