Understanding r.js options w/grunt & backbone and relative paths - javascript

I'm trying to figure out how to use r.js. I keep getting errors thrown such a module path does not exist, or files getting dumped where they shouldn't be.
I've got a single page application that is integrated with wordpress. I've adopted this backbone boilerplate for my general structure, although I've set things up quite different. My file structure is shown below.
.Theme Folder
├── _assets
| ├── _application
| | ├── css
| | ├── fonts
| | ├── img
| | ├── _js
| | | ├── main.js //this is my require.js config file
| | | ├── _app //here's where the boilerplate structure comes into play
| | | ├── collections
| | | ├── models
| | | ├── routers
| | | ├── templates
| | | ├── views
| | | ├── libs
| | | ├── utilities
| | ├── scss
| | ├── video
| └── build //Concatenated application directory mirror
| └── gruntfile.js
| └── bower.json
| └── package.json
To save the heartache of deciphering my gigantic grunt file. Basically I originally set it up so that everything gets conatenated, uglified, and compiled into the build folder. I created a simple task for r.js to just test things out. I get an error saying my lodash library cannot be found (first path in my main.js file). It thinks lodash is in assets/lodash.js it's ignoring my baseUrl property in my main.js (require.js configuration) it's actual location is assets/application/js/libs/lodash.js. My requirejs task is below:
requirejs: {
compile: {
options: {
baseUrl: "./",
mainConfigFile: "application/js/main.js",
name: "./application/js/main",
out: "./build/js/optimized.js"
}
}
}
I'm having the hardest time figuring out what exactly rjs is doing. When I expect it to work it's not looking for the files in the right directory. When I configure it to find the right files it copies my entire assets folder and dumps it into my build folder... Which has caused a lot of confusion as to what all r.js is doing and what it wants me to input for it's options.
This is the error I am currently getting:
>> Error: ENOENT, no such file or directory
>> 'path-to-theme-folder-here/assets/libs/lodash.js'
>> In module tree:
>> application/js/main.min

It seems to me with the description you give, this should work:
requirejs: {
compile: {
options: {
baseUrl: "application/js/",
mainConfigFile: "application/js/main.js",
name: "main",
out: "build/js/optimized.js"
}
}
}

Related

Dynamic source for vue-i18n custom block

I'm using vue-i18n and I was wondering if there is a way to dynamically change the source file of <i18n> to match the locale language.
For each vue component I have a folder with my different translations :
├── myComponent
| └── lang
| ├── en.json
| ├── fr.json
| └── index.vue
In my index.vue I'd like to do something like :
<i18n src='./lang/' + $i18n.locale + '.json'></i18n>
Is it possible ?
UPDATE:
So apparently it is not possible for now.

What is the proper way to import js, css, scss files to webpack?

I'm new to webpack and I am trying to use material-dashboard (https://www.creative-tim.com/product/material-dashboard) in my project.
Actually, I installed using npm install (https://www.npmjs.com/package/material-dashboard)
So I got this structure in my ./node_modules/material-dashboard:
material-dashboard/
├── assets/
| ├── css/
| | ├── bootstrap.min.css
| | ├── material-dashboard.css
| | └── demo.css
| ├── js/
| | ├── bootstrap-notify.js
| | ├── bootstrap.min.js
| | ├── chartist.min.js
| | ├── demo.js
| | ├── jquery-3.1.0.min.js
| | ├── material-dashboard.js
| | └── material.min.js
| ├── sass/
| | ├── md
| | └── material-dashboard.scss
| └── img/
|
├── documentation/
├── examples/
In their example to import they just use link tags like:
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/material-dashboard.css" rel="stylesheet"/>
<link href="css/demo-documentation.css" rel="stylesheet" />
But I'm using webpack so I've tried to import using require in my entry file (app.ts)
require('material-dashboard/assets/css/material-dashboard.css');
after adding in my webpack.config
loader: isTest ? 'null' : "style-loader!css-loader"
Apparently it works, I'm not quite sure. But there are 3 css files, 7 js files and 2 .scss files.
I don't want to to import file by file, of course there is a better way.
I would like to know what is the proper way to import in webpack js/css/scss files to use in a project?
Thanks.
very easy man
for js file use
import 'the_name_of_npm_package';
for 'css' file use
require('the_name_of_npm_package/../../../the_file.css');
NOTE : if you still find problems u can use Vue webpack template with vue cli there are alot of tuts on utube that template is easy for begginers in webpack it has every loader and config you need .

Node.js and project structure

I am working on a new project with Node.js, Express, Socket.io and the MySQL module and being a beginner with those technologies, I have a few questions about structuring the project and good practices.
Right now, my code is structured as follow:
├── node_modules
├── package.json
├── server.js
├── server.socket.live.js # Socket.io namespace
├── server.database.js # For database configuration and connection pool
├── server.database.resources.js # Model for the 'resources' table
├── server.route.live.js
└── ...
For the current state of the project, it works well enough, but the code grows fast and a sole directory will make the code hard to navigate and maintain.
So I've been trying to figure out a way to structure my code with the following rules:
I need global files that I can include from everywhere (for example: the database and models).
The routes and other sub-components must be (and are) independant to each other.
Node must be able to correctly cache each files, so different paths ('./database.js' and '../database.js') are out of the question.
If possible, avoid requires from parent directories.
With that in mind, I came up with this solution:
├── package.json
├── node_modules
| └── ...
├── server.js
├── server
| ├── node_modules
| | ├── database
| | | ├── package.json
| | | ├── database.js
| | | ├── resources.js
| | | └── ...
| ├── socket
| | ├── live.js # With live subfolder if file grows too big
| | └── ...
| ├── routes
| | ├── live.js # With live subfolder if too many sub-routes
| | └── ...
In theory it works great: with a structure like this I could easily add new "global" modules in server/node_modules, and new routes or socket namespaces, as long as they are independant from each other.
So my question: would that work in practice, or is there a better way to do it? Will Node be able to require the files in server/node_modules with good caching? How do I include the server/node_modules subfolder in my git repository (while still ignoring the root node_modules)?
With many thanks!

How do we separate the built files from the source while also being able to test and see Express views from the source?

I'm staring to build a project in node. The directory structure I've decided to use is to have all my source files under ./src, and the files I'll eventually upload to the server under ./dist. The (not quite complete) directory structure is shown below. The ./dist structure will eventually mirror ./src once it's built.
|-- LICENSE
|-- Procfile
|-- dist
| `-- server.js
|-- gulpfile.js
|-- package.json
|-- scripts
|-- src
| |-- assets
| | |-- fonts
| | `-- images
| |-- common
| | |-- directives
| | |-- resources
| | `-- services
| | `-- authentication
| |-- index.jade
| |-- less
| |-- server
| `-- server.js
|-- test
| `-- server.spec.js
`-- vendor
My question is, when I'm setting the view folders for ./src/server.js, should I set them to the files under ./dist, or ./src? I see reasons for both, but it doesn't seem like anybody would do that.
serving from ./dist makes the most sense for production, obviously, since this will be the only folder shipped to the production server. Right?
serving from ./src will allow me to test the server and its pages before building/minifying/etc. the entire thing into ./dist.
How do people separate the built files from the source while also being able to test and see Express views from the source? Is it as simple as setting views under the conditional process.env.NODE_ENV === "production"? Is there a more elegant solution-- to either my server app code or directory structure?
for the view directory, I advice to put it in the src folder and just copy them with a gulp task

Uglifyjs files in debug folder and move them to release folder

I want to uglifyjs my files in my debug/js folder and move them to release/js folder. My bash script is in the root directory of debug and release:
.
├── release.sh
├── debug
| ├── js
| | ├── a.js
| | ├── b.js
| | ├── c.js
├── release
| ├── js
This is what I have got so far:
for file in "debug/js/*"
do
fileName=$(basename "$file")
uglifyjs $file > "release/js/$fileName.js"
done
Unfortunately, this does not work at all. It just creates one *.js file in release/js, which is not what I want. What am I doing wrong?
This is what I actually want:
...
├── release
| ├── js
| | ├── a.js
| | ├── b.js
| | ├── c.js
From the bash man page
Enclosing characters in double quotes preserves the literal value of
all characters within the quotes, with the exception of $, `, \, and,
when history expansion is enabled, !.
So moving the * outsides double quotes, "debug/js/"* or removing the double quotes all together, since there are no spaces or other special characters in the path, would work.

Categories

Resources