Is there anyway to set the baseUrl at the path level? I have 1 dependency (my-dependency) in a different folder than the other dependencies. However, when I set the path for that 1 dependency, any dependency that my-dependency has, is relative to the baseUrl of the main app, and not to my-dependency.
I'm looking for something like this maybe:
require.config(
baseUrl: '/js/ad-buys',
paths: {
"my-dependency": {
path: "/js/contacts/my-dependency"
baseUrl: "/js/contacts"
}
}
);
No, that's not possible.
You should not need it anyway. What you describe wanting to do should be achievable by using relative paths for your dependencies. For instance, my-dependency could contain:
define(['./foo'], function (foo) {
});
This would load the module /js/contacts/foo and bind it to the foo parameter of your function . You can also use .. if you need to move up the hierarchy.
Related
So I want to do a very simple task using webpack.
I have a few static HTML templates like e.g.
test.html
<div><span>template content</span></div>
and all I want to do is return the string inside the template
e.g
require("raw!./test.html")
with should return a string like:
"<div><span>template content</span></div>"
but instead, it returns the following string
"modules.exports = <div><span>template content</span></div>"
I have tried several modules, like the raw-loader and html-loader.
and they both behave the same way.So I took a look at the source code, just to find out that its SUPPOSED to behave this way.
so what exactly am I expected to do with this, if I just want the raw
HTML? is it a bad practice just to remove the prepended
"module.exports =" string? from the bundle
edit: removing the 'modules.export =' part results in the bundle returning nothing :/
my config
module.exports =
{
module:
{
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
}
};
The solution is to require your file without specifying any additional loader, as this is already specified in the webpack config
const test = require('./test.html')
Explanation: With your current code, you are applying the raw loader twice to your file. When you specify a loader chain in your configuration:
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
... you are already telling webpack to add this loader to the loader chain every time you require a file matching the test condition (here, every html file)
Therefore, when you write this
const test = require('raw!./test.html')
... it is actually equivalent to this
const test = require('raw!raw!./test.html')
I finally figured it out I think. You need to resolve the path name using require.resolve(./test.html) https://nodejs.org/dist/latest-v7.x/docs/api/globals.html#globals_require
When you write require('./test.html') it means that you simply run the code returned by the loaders chain. The result is exported in this code as module.exports. To use this result you need to assign your require statement to variable:
var htmlString = require('raw!./test.html');
//htmlString === "<div><span>template content</span></div>"
Remember that any loader in Webpack returns JS code - not HTML, not CSS. You can use this code to get HTML, CSS and whatever.
I am using steve sanderson's yeoman knockout scaffolding described here.
However I have one issue which is if I decide to create folders for different types of modules, and If I then want to inject one of these modules into my components using folder name conventions then I have to use a very verbose path resolution like "../../services/service".
define(["knockout", "text!./home.html","../../services/service"], function(ko, homeTemplate, service) {
function HomeViewModel(route) {
this.message = ko.observable('Welcome to App!');
}
HomeViewModel.prototype.doSomething = function() {
this.message('You invoked doSomething() on the viewmodel.');
};
return { viewModel: HomeViewModel, template: homeTemplate };
});
I am wondering if there is a better way to do this. For example just being able to use folder name and file name like "services/service"
The paths configuration is your answer (ref). In your configuration do:
require.config({
// ...
paths: {
'services': 'path/to/services/folder'
},
// ...
})
Now you can require the path/to/services/folder/myservice.js module from any other module as:
define(['services/myservice'], function(myservice) {
// ...
});
I'm trying both gulp.js and grunt.js to convert from markdown to PDF, both of them use markdownpdf npm package.
This is my gulpfile.js
gulp.task('markdownpdf', function () {
gulp.src('_src/*.md')
.pipe(concat('document.md'))
.pipe(markdownpdf({
cssPath: '/_src/css/pdf.css',
paperFormat: 'A4',
paperOrientation: 'portrait',
paperBorder: '2cm'
}))
.pipe(gulp.dest('_dist'));
});
Without cssPath option, markdownpdf package picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css (I tired to edit this file to confirm that it was picked)
Please help how to setup custom css path.
Thanks.
What's worked for me is to start the path with a ./. The single dot represents the directory with the gulpfile in it.
e.g
gulp.task('docs', function () {
return gulp.src('./docs/*.md')
.pipe(markdownpdf({
'cssPath': './docs/assets/pdf.css'
}))
.pipe(gulp.dest('./web/docs/pdfs'));
});
so '/_src/css/pdf.css' maps to what?
It should respond to relative path notation, so if it picks node_modules/gulp-markdown-pdf/node_modules/markdown-pdf/pdf.css by default, then try setting your cssPath value to ../../../_src/css/pdf.css, assuming _src is in your project's root
Maybe you will need back 5 levels.
My gruntfile.js...
markdownpdf: {
options: {
cssPath: "../../../../../css/style.css",
Suppose I have a module that starts like the following:
define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../templates/requestRow.html!strip', 'text!../templates/respondForm.html!strip'], function($, actions, util, tDialog, tRequestRow, tRespondForm) {
This module contains most of the code for writing to my client UI. It also loads a couple other modules I've written as well as 3 HTML templates using the text.js plugin. I'm wondering if there's a more concise way of doing this? As the application grows, I may have additional templates to load, or modules and it just seems like my define statement could grow to be a bit ugly. Should I just add my template paths to require.config in my main.js like this:
require.config({
baseUrl: '/webrequests/resources/scripts/',
paths: {
'modernizr': '../js/vendor/modernizr-2.6.2-respond-1.1.0.min',
'bootstrap' : '../js/vendor/bootstrap.min',
'dialog' : 'text!../templates/dialog.html!strip',
'requestRow' : 'test!../templates/requestRow.html!strip',
'respondForm' : 'text!../templates/respondForm.html!strip'
}});
Is there perhaps some way to load all templates within a directory and just have 1 dependency to include in the define statement?
Thanks in advance.
You could make a module for loading in the templates you frequently use. So group the templates to be loaded in one module, that way you can just load this template module instead of the individual templates:
// generalTemplates.js
define([
'text!../templates/dialog.html!strip',
'text!../templates/requestRow.html!strip',
'text!../templates/respondForm.html!strip'
], function (tDialog, tRequestRow, tRespondForm) {
return {
dialog: tDialog,
requestRow: tRequestRow,
respondForm: tRespondForm
};
});
So that in your module, you can simply include the templates like any other module:
define([
'jquery',
'actions',
'util',
'generalTemplates'
], function($, actions, util, templates) {
var tDialog = templates.dialog,
tRequestRow = templates.requestRow,
tRespondForm = templates.respondForm;
/* You can do stuff with the templates here */
});
For the sake of argument, say I want to load Zepto by default, but use jQuery instead for IE (all versions).
What would be a sensible way to do this when using Require.js?
There are two approaches: "proper" but long and "sleight of hand" but short.
"Proper" but long:
require.config({
paths: {
jquery:'path/to/jquery'
, zepto: 'path/to/zepto'
}
})
var iNeed = []
if (!('__proto__' in {})) {
// This is IE
iNeed.push('jquery')
} else {
// Everything else
iNeed.push('zepto')
}
require(iNeed, callback)
"Sleight of hand" but short:
var AMDConfig = {
paths: {
jquery:'path/to/zepto'
}
}
if (!('__proto__' in {})) {
// This is IE
AMDConfig.paths.jquery = 'path/to/jquery'
}
require.config(AMDConfig)
require(['jquery'], callback)
The reason the "sleight of hand" is not "proper" is that you are masking the real nature of what stands behind "jquery" As you grow your app, some jQuery plugins may come and not work over zepto, but it will not be immediately clear what the issue is.
The "proper" solution is also a problem in one respect - if you define the requirements array dynamically, the build tool like r.js will not be able to find other dependencies you put there.
Your pick..