merging files with dependencies - require js - requirejs

I'm using require JS.
I want to marge two files into one.
I'm using for that require js plugin for grunt.
First file is raty jquery script.
Second is my own file like this:
define('userGlosowanie', ['jquery', 'raty'], function ($) {
'use strict';
return {
init: function () {
}
}
});
And here is my grunt script:
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
name: "userGlosowanie",
out: "js/build/uzytkownik.min.js",
preserveLicenseComments: false,
}
},
},
Problem is that I've got error:
Running "requirejs:user" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'D:\strony\www\polskieszlaki\js\libs\jquery.js'
>> In module tree:
>> user
Warning: RequireJS failed. Use --force to continue.
my jquery file is in separate file and I don't want to include it in compiled file. How to do it?

If you don't want to include jquery in build file just mark it as empty: in path config.
options: {
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
jquery: "empty:"
}
}

You can exclude a particular module/file from getting included in the combined/optimized file using the exclude option
In your case it will look like -
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
out: "js/build/uzytkownik.min.js",
name: "userGlosowanie",
exclude: "jquery"
preserveLicenseComments: false,
}
}
}
With modules and dir(output dir) option, you may not be able to set the output file name, but the optmized file with same name as the module will be placed in the directory set by option dir
requirejs: {
userGlosowanie: {
options: {
baseUrl: "js/libs",
paths: {
userGlosowanie: "../dev/uzytkownik-glosowanie",
raty: "raty/jquery.raty",
},
dir: "../public",
modules : [{
name: "userGlosowanie",
exclude: "jquery"
}],
preserveLicenseComments: false,
}
}
}
Sample usage/explanation is here

Related

Cannot find module 'sanitize.css/page.css'

While building the gatsby project, I faced this kind of error.
yarn develop
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Cannot find module 'sanitize.css/page.css'
Require stack:
- D:\UpworkJobs\Nate\dci-gatsby-importexport\node_modules\postcss-normalize\dist\index.cjs.js
File: src\css\preview.css
failed Building development bundle - 366.725s
Here is a screenshot of the error log.
These kinds of errors occur even if I removed all CSS codes from the style files.
It seems importing CSS files is not working. If I didn't import the CSS files, the errors go away.
Here are all codes of gatsby-config.js
let systemvars = false;
if (process.env.NODE_ENV === "production") {
systemvars = true;
}
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
systemvars
});
// Gatsby automatically sets NODE_ENV to `development` or `production` when running `gatsby develop` or `gatsby build`, respectively.
// Thus make sure you have .env.development or .env.production setup (unless your CI/build env vars are already set globally)
const AliasConfig = require("./alias.config.js");
module.exports = {
siteMetadata: {
title: `DCI DigiGuide Print`,
description: `DCI DigiGuide Printable Version`,
author: `#designbycosmic`,
siteUrl: process.env.SITE_URL,
},
plugins: [
//
// * App Functionality Plugins
//
// eslint plugin
{
resolve: "gatsby-plugin-eslint",
options: {
test: /\.js$|\.jsx$/,
exclude: /(node_modules|.cache|public)/,
stages: ["develop"],
options: {
maxWarnings: undefined,
emitWarning: true,
failOnError: false,
failOnWarning: false,
},
},
},
// allows content to be placed in head
`gatsby-plugin-react-helmet`,
// adds web manifest for some pwa functionality
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-dci-digiguide-print`,
short_name: `DigiGuidePrint`,
start_url: `/`,
background_color: `#222c47`,
theme_color: `#222c47`,
display: `minimal-ui`,
icon: `./src/images/favicon.png`, // This path is relative to the root of the site.
},
},
// allow alias imports
{
resolve: "gatsby-plugin-alias-imports",
options: {
alias: AliasConfig.map,
extensions: AliasConfig.extensions,
},
},
// inline svgs instead of converting them to base64
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /svg/,
},
},
},
`gatsby-plugin-postcss`,
`gatsby-plugin-material-ui`,
// Craft CMS configuration
{
resolve: `gatsby-source-graphql`,
options: {
url: process.env.CRAFT_API_URL,
typeName: "Craft",
fieldName: "craft",
headers: {
Authorization: `bearer ${process.env.CRAFT_API_TOKEN}`,
},
},
},
// Get build date
{
resolve: `gatsby-plugin-build-date`,
options: {
formatAsDateString: false,
},
},
],
};
Help me to solve this problem.
In my case I was able to solve by adding the following configuration in package.json.
"resolutions": {
"sanitize.css": "12.0.1"
},
Finally, this problem has been solved.
Using yarn instead of using npm solved the problem.
Remove node_modules and yarn install
After that, the problem has gone away.
Thank you.

How to configure Grunt serve/livereload to combine mustache templates

I'm using Yeoman template to develop a static web site. grunt serve nicely works with the auto reload plugin.
For repeating elements I started to use {{mustache}} partials and it works like a blast. Now I want the auto reload to assemble my page, so I can look at the resulting page when editing one of the mustache files (either a main file or a partial).
I found a grunt task for it, but stitching it together eludes me. My config looks like this:
grunt.initConfig({
sass: {
dev: {
src: ['src/sass/*.sass'],
dest: 'dest/css/index.css',
},
},
watch: {
sass: {
// We watch and compile sass files as normal but don't live reload here
files: ['src/sass/*.sass'],
tasks: ['sass']
},
mustache: {
files: '**/*.mustache',
tasks: ['mustache_render'],
options: {
interrupt: true
},
},
livereload: {
options: { livereload: true },
files: ['dest/**/*']
}
},
mustache_render: {
options: {
{data: 'common-data.json'}
},
your_target: {
files: [
{expand: true,
template: '**/*.mustache',
dest: 'dest/'}
]
}
}
});
I must be missing something since the html files are not updated when I save the file.
You can add the livereload option directly to your mustache target options.
grunt.initConfig({
watch: {
mustache: {
files: '**/*.mustache',
tasks: ['mustache_render'],
options: {
interrupt: true,
livereload: true
},
}
},
mustache_render: {
options: {
{data: 'common-data.json'}
},
main: {
files: [
{expand: true,
template: '**/*.mustache',
dest: 'dest/'}
]
}
}
});
Also, if you're using grunt-contrib-connect to serve your files, don't forget to add the livereload option to it:
connect: {
http: {
options: {
hostname: "*",
port: process.env.PORT || 80,
livereload: true
}
}
}

Source maps in uglified requirejs project

I have a requirejs project, I'm compiling with grunt-requirejs ("grunt-contrib-requirejs": "~0.4.1") into 1 big file: main.js. This task has source map generation enabled:
requirejs: {
compile: {
options: {
baseUrl: 'source/js',
name: 'main',
optimize: 'none',
generateSourceMaps: true,
out: 'build/js/main.js',
wrap: true,
shim: requireJsConfig.shim,
paths: requireJsConfig.paths
}
}
}
After that I minify this main.js with grunt-uglify ("grunt-contrib-uglify": "~0.2.7") using this configuration:
app: {
options: {
beautify : {
quote_keys: true
},
compress: false,
report: 'min',
sourceMap: 'build/js/main.js.map',
sourceMapIn: 'build/js/main.js.map', // input from requirejs
sourceMapIncludeSources: true
},
files: {
'build/js/main.js': ['build/js/main.js']
}
}
I would like to have a source map that will tell me an error in the source files (the ones requirejs consumes), but instead source map refuses to work at all. Please help me to get there as I'm feeling helpless already.
grunt-require comes with it's own uglify package built in:
eg.
requirejs: {
compile: {
options: {
generateSourceMaps: true,
logLevel: 4,
baseUrl: "common/scripts/",
include: "./main",
out: "common/dist/main.js",
preserveLicenseComments: false,
optimize: "uglify2",
mainConfigFile: "common/scripts/main.js"
}
}
}

Why my r.js won't include the 3rd parties js files when generating one? How to include them?

I'm using requirejs in my web app, and have several 3rd party libraries(e.g. jquery, underscore), and my own js files.
Here is the "main.js" which will be loaded by requirejs:
require.config({
baseUrl: 'public/js',
paths: {
jquery: '../vendor/jquery/jquery',
underscore: '../vendor/underscore/underscore',
modernizr: '../vendor/modernizr/modernizr'
},
shim: {
underscore: {
exports: "_"
},
modernizr: {
exports: "Modernizr"
}
}
});
require(['app']);
And here is my grunt config:
requirejs: {
compileJs: {
options: {
baseUrl: "src/main/resources/public/js",
mainConfigFile: "src/main/resources/public/js/main.js",
dir: "src/main/resources/public/min/js",
optimize: "uglify2",
removeCombined: true,
generateSourceMaps: true,
modules: [
{
name: "main"
}
]
}
}
}
grunt.loadNpmTasks('grunt-contrib-requirejs');
When I run the task, it will generate a minified "main.js" which contains all my own code. But I also want it to contain the 3rd libraries(jquery, underscore, modernizr).
I tried again and again, but never succeed, nor find the reason. Why and how to include them?

Requirejs Gruntfile cannot locate almond

i'm trying to use almond.js in grunt to combine my files into on .js and uglify it.
My configuration in grunt is like this:
requirejs: {
compile: {
options: {
baseURL: "www/js/lib",
mainConfigFile: 'www/js/main.js',
name: '../../../node_modules/almond/almond',
include: '../main',
out:'../target/app.min.js',
findNestedDependencies: true,
optimize: 'uglify',
}
}
},
my main.js is this:
require.config({
baseUrl: "js/lib",
paths: {
app: '../app',
tpl: '../tpl'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'backbone-indexeddb': {
deps: ['backbone', 'IndexedDBShim']
},
'IndexedDBShim': {
deps: ['backbone']
}
}
});
If i try to run grunt requirejs i get an error:
Error: Error: ERROR: module path does not exist: project/www/js/js/lib/../../../node_modules/almond/almond.js for module named: ../../../node_modules/almond/almond. Path is relative to: project
at /project/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25964:35
which i do not understand, where does the second /js/ in the path come from? It does not exist in my file structure, i have my project folder set up like this
project
gruntfile
node_modules
almond
almond.js
www
index.html
js
app
lib
main.js
Oh, i'm configuring the baseurl twice, shouldn't do that. If i remove the baseurl parameter in the gruntfile it works fine.

Resources