i have a following requirejs configuration in my code:
require.config({
baseUrl: "js",
// urlArgs: 'cb=' + Math.random(),
deps:["config","app"],
paths: {
'jquery' : 'jquery/jquery',
'jquerymobile.config' : 'mobile/jquerymobile.config',
'jquerymobile': 'mobile/jquery.mobile-1.3.1.min' ,
'underscore': 'underscore-amd/underscore-min',
'backbone' : 'backbone-amd/backbone-min',
text: 'plugins/text'
},
shim: {
underscore: {
exports: "_"
},
'jquery' : 'jquery',
'jquerymobile.config' : ['jquery'],
jquerymobile : {
deps : ["jquery", 'jquerymobile.config']
},
backbone: {
deps: ['underscore', 'jquery', 'jquerymobile'],
exports: 'Backbone'
}
}
});
inside jquerymobile.config file i have console log statement, which cannot be seen after optimization with following build profile (build.js):
({
appDir: '../',
baseUrl: 'js',
dir: '../../dist',
name: 'config',
skipDirOptimize:true,
fileExclusionRegExp: /^(r|build)\.js$/,
excludeShallow: ['settings'],
mainConfigFile: '../js/config.js',
optimizeCss: 'standard',
removeCombined: true,
deps:["config","app"]
})
I have a feeling that r.js ignoring the shim, dependecies,\n
is there any workaround?
thanks for help
Please try the following way:
include your jquerymobile.config in main.js require dependencies list:
require(['app', 'jquerymobile.config', 'jquerymobile'], function(App) {
App.initialize();
});
Related
I have a requirement where I need to map my libs as an expanded path in the Jest config moduleNameMapper configuration.
Along with that I also need to provide one axois as the name module mapping.
How can I do both in the moduleNameMapper in jest-e2e.js?
Here is my existing jest-e2e.js file:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' }),
};
My tsconfig.json looks like:
{
"paths": {
"#app/logger": [
"libs/logger/src"
],
}
}
I want to add one more moduleNameMapping which is not there in the tsconfig.json.
Basically, I want to add this mapping as well:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
How may I combine both the stuffs into the same moduleNameMapper clause in the jest config file.
This is what I have tried so far:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
const libNameMapping = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' });
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: {
'^axios$': require.resolve('axios'),
...libNameMapping,
},
};
So basically how can both the axios and the nameMapping can be combined and applied to the moduleNameMapper portion of the configuration. That's the query here.
Now if I want to add it like without any helper, like below, it also does not work:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
'^#app/(.*)$': '<rootDir>/../../../libs/$1/src',
},
The path are not resolved, gives this error:
Configuration error:
Could not locate module #app/common/const mapped as:
C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#app\/(.*)$/": "C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src"
},
"resolver": undefined
}
1 | import { createParamDecorator, ExecutionContext } from '#nestjs/common';
> 2 | import { constants } from '#app/common/const';
I think I have to use the Jest helper method. But how can I do it combining both axois and my libs name mapping, is not getting it.
I have a karma config which for my unit test and code-cov. My project dir looks like below
RootFOlder
-karma.config.js
-webpack.test.config.js
-src/
--test.ts
--components
---ButonComponent
----Buttoncomponent.spec.ts
And my karma.config is below
// Karma configuration
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'src/test.ts',
'src/components/**/*.component.ts',
],
// list of files / patterns to exclude
exclude: [
'node_modules',
'./src/tsconfig.spec.json'
],
plugins: [
require('karma-jasmine'),
require("karma-coverage"),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-webpack'),
require('karma-sourcemap-loader'),
require('ts-loader')
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/components/**/*.ts': ['coverage'],
'src/components/**/*.component.ts': ['webpack', 'sourcemap'],
'src/test.ts': ['webpack', 'sourcemap'],
},
webpack: require('./webpack.test.config'),
coverageReporter: {
reporters: [
{ type: 'text', subdir: 'text' },
{ type: 'html', subdir: 'report-html' },
]
},
...
...
});
}
And my webpack.
module.exports = {
devtool: 'inline-source-map',
mode: 'development',
target: 'node',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular-router-loader', 'angular2-template-loader']
}
....
....
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test')
}),
// Removes warnings regarding Critical dependency
new webpack.ContextReplacementPlugin(
/\#angular(\\|\/)core(\\|\/)f?esm5/, path.join(__dirname, './src')
)
],
node: {
console: false,
global: true,
process: true,
Buffer: false,
setImmediate: false
}
}
The problem is after i run my test, my coverage covers the bundled node_modules. The file coverage endup being hude running in MBytes and my coverage low. Pls how do i exclude the node_modules from my coverage? Any help is appreciated .
By default you shouldn't even need to mention node_modules in the exclude path. Try removing it and see if the coverage is corrected?
If not,
try adding this to the preprocessors:
'!node_modules/**/*.*': ['coverage']
I have the following webpack.config.ts:
var webpack = require( 'webpack' );
var path = require( 'path' );
module.exports = {
entry: [
'./api/bin/www.ts'
],
output: {
path: path.resolve( __dirname, './dist/api' ),
filename: 'index.js'
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'awesome-typescript-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
extensions: [ '', '.js', '.ts' ]
},
target: 'node',
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
When I run webpack I get a warning about a dependency:
WARNING in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
# ./~/express/lib/view.js 78:29-56
The express server I start with this is no more than a Hello World example and functions as should but I am concerned about this warning.
My googlefu hasn't revealed any passable solutions. I have seen one particular instance of this problem but the solutions were to bypass the warning by not showing it.
Use webpack-node-externals.
const nodeExternals = require('webpack-node-externals');
{
target: 'node',
externals: [nodeExternals()],
}
https://www.npmjs.com/package/webpack-node-externals
For those that only need to remove the express due to the view lib as mentioned here you can also explicitly target express in externals from your webpack config.
externals: [{ 'express': { commonjs: 'express' } }]
My warning only got fixed with:
module.exports =
{
target: 'node',
externals: {
"express": "require('express')"
}
}
Instead of excluding all of the npm dependencies to be bundled with nodeExternals you can also exclude only express by natively requiring it by replacing
import express from 'express';
// Or
const express = require('express');
To
const express = __non_webpack_require__('express');
That will suppress the warning caused by express
I'm using karma-eslint plugin. It looks very easy to use but for some reason, I don't see any errors or warnings and my tests are running smoothly even though I put some eslint errors
here is my karma.config.js file:
module.exports = function (config) {
config.set({
browsers: [process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'src/**/*.jsx': ['coverage'],
'test/**/*.js': ['eslint'],
},
eslint: {
engine: {
configFile: './.eslintrc',
emitError: true,
emitWarning: true
}
},
reporters: ['progress', 'coverage'],
coverageReporter: {
/* coverage configurations */
},
webpack: {
/* some webpack configurations */
}
The violation I planted in the one of my test.js files - define a new variable but not using it (eslint rule: 'no-unused-vars')
Please let me know if any further information is needed and I'll edit the post accordingly.
Cheers!
Found another solution!
in my webpack configuration I've used the eslint-loader' forwebpack` as follows:
webpack: {
module: {
preLoaders: [
{test: /\.js$/, exclude: /(src|node_modules)/, loader: 'eslint-loader'}
]
}
}
How do we get around the "document is not defined" error when doing a r.js build via r.js -o against a dijit?
Specifically, I'm trying to build r-build.js:
define(["require", "exports", "dijit/layout/ContentPane"], function (require, exports, ContentPane) {
function simple() {
return ContentPane;
}
return simple;
});
Using r.js.cmd -o r-build.js and it reports:
ReferenceError: document is not defined
In module tree:
test/simple
dijit/layout/ContentPane
dijit/_Widget
dojo/query
dojo/selector/_loader
My r-build.js file looks like this:
({
appDir: "../",
baseUrl: "amd",
dir: "../../release",
optimize: "none",
modules: [
{
name: "test/simple",
exclude: ["jquery", "dojo"]
}
],
packages: [
{
name: 'cm',
location: 'http://localhost:93/CodeMirror'
},
{
name: 'jquery',
location: 'd:/code/jquery/src',
main: 'jquery'
},
{
name: 'jquery/ui',
location: 'http://localhost:93/jquery-ui/ui'
},
{
name: 'jquery/themes',
location: 'http://localhost:93/jquery-ui/themes'
},
{
name: 'sizzle',
location: 'http://localhost:93/jquery/external/sizzle/dist',
main: 'sizzle'
},
{
name: 'dojo',
location: 'd:/code/dojo'
},
{
name: 'dijit',
location: 'd:/code/dijit'
},
{
name: 'xstyle',
location: 'http://localhost:93/xstyle'
}
]
})
I'm fighting with the same issue. Building a r.js bundle with Dojo is a pain.
That one can be easy to fix... If you don't have problems with the supported browsers (post pre-ie9, for instance) override that file and change the lines that check the querySelectorAll to true and you will not need to do those checks. Like...
has.add("dom-qsa2.1", true);
has.add("dom-qsa3", true);
Hope it helps a bit...