I want to create an alias for a requirejs module that is loaded via a plugin, like text or in this case, noext plugin.
Im trying to do this, but when loading resources it will not use the plugin but think of it as a simple path.
require.config({
paths: {
noext: '../../../../Stuff/require/noext',
resources: 'noext!application/resources'
}
});
How can I create an alias for a module loaded via plugins?
I think that the only way to alias resources using requirejs is to define them:
define('noext', ['../../../../Stuff/require/noext'], function(noext) {
return noext;
});
Related
I want to refactor a large requireJS project to use es6 import/export and webpack. In the requireJS requirejs.config call, I use the config section to pass some project specific settings to some views:
requirejs.config({
baseUrl: 'js/cfe/app',
paths: { },
config: {
'views/test/TestView': {
isTest: true
}
})
and in the view:
define(['module'], function(module) {
var t = module.config().isTest
})
How can I accomplish the same behaviour in my webpack setup?
I'm not quite sure if I understand your question correctly, but maybe you can use my answer anyways.
I think you could extract your configuration object to JSON file, use a loader (RAW loader works fine) to include it in your bundle, and then when you need it simply use ES6 import:
import config from 'myconfig.json';
I'm having problems setting up TinyMCE with an existing setup of RequireJS. The bootstrap file (tinymce.dev.js, tinymce.js, tinymce.jquery.js, tinymce.jquery.dev.js) for TinyMCE 4.2.5 has its own define and require functions, which overwrite the ones supplied by RequireJS. I've tried commenting out the lines so that they don't overwrite the existing RequireJS functions, but this doesn't help.
I'm also using tinymce in my project. You don't have to modify any of the script file. To make it work you have to shim the tinymce library hence it will be fully compatible with requirejs (http://requirejs.org/docs/api.html#config-shim).
So in your requirejs config you should have something like that :
requirejs.config({
...
baseUrl : 'your_lib_path',
shim : {
...
'tinyMCE': { exports: 'tinyMCE'}
},
paths: {
...
'tinyMCE': 'tinymce/tinymce' //path from the baseUrl to tinymce.js ("js" extension has to be ommited)
}
});
I want to port my requirejs web application to webpack module bundler. The app use several non AMD libraries (such jquery and bootstrap). RequireJS maintains such libraries via shim configuration. How I can declare dependincies for non AMD libraries in webpack?
I'm in the process of doing the same. It's practically as you would any AMD module. To use stringified templates put into AngularJS' $templateCache as an example:
Templates are generated in non-AMD format wrapped in an IIFE, pushed into a .tmp dir, then requested as per any module:
define([
'./module',
'templates/ubCampaignEditor'
]
As to keep definitions clean, I've created a resolve.alias named templates, in the Webpack config:
resolve: {
alias: {
templates: path.join(__dirname, '.tmp/templates')
}
}
I know we could use requirejs combine files into one js file.
such like the following config.
module.exports = {
baseUrl: 'js/',
mainConfigFile: 'src/js/common.js',
dir: 'scripts/',
optimize: 'uglify2',
modules: [
{
name: 'common',
include: [
'jquery',
]
}
]
};
my result into one file is
common.js
----------------
jquery.js
modernizr.js
common.js
my question is, do we still need to put a require.js file in scripts folder and to use the following format
<script data-main="scripts/common" src="scripts/require.js"></script>
or we could just use
<script src="scripts/common.js"></script>
as files are compressed into one file?
You still need to load require.js the usual way to actually make use of the module loading benefits that it provides, and especially if you use the asynchronous functionality a lot. However, you can have a look at almond providing your code uses AMD and (from the README):
optimize all the modules into one file -- no dynamic code loading.
all modules have IDs and dependency arrays in their define() calls -- the RequireJS optimizer will take care of this for you.
only have one requirejs.config() or require.config() call.
do not use RequireJS multiversion support/contexts.
do not use require.toUrl() or require.nameToUrl().
do not use packages/packagePaths config. If you need to
use packages that have a main property,
volo can create an adapter module so
that it can work without this config. Use the amdify add command to
add the dependency to your project.
Almond is great because it doesn't need require.js at all; it wraps your own code with itself, which is a very minimal AMD loader skeleton and nowhere near as powerful as the main library. You then get a single optimised file that can be linked directly in your HTML:
<script src="scripts/common.js"></script>
The Gruntfile config for almond could look something like this:
compile: {
options: {
name: 'path/to/almond',
baseUrl: 'js',
include: ['main'],
insertRequire: ['main'],
mainConfigFile: 'scripts/config.js',
out: 'scripts/main.js',
optimizeAllPluginResources: true,
wrap: true
}
}
The above is all standard r.js boilerplate, you can find many more examples at the almond homepage.
i'm reading little about requireJS and trying to understand it.
What i want to know:
Should i structure my files in specific way or pattern like Module-Pattern ??
When working with libraries should these files support AMD ?
Thanks Alot for your help.
You can structure your files any way you see fit. RequireJS loads the script file referenced in the data-main attribute of the script tag that loads require.js. From that file you're free to require whatever modules you want.
Libraries don't need to support AMD. You can use the shim config to load modules that export value to the global scope (i.e. normal javascript files).
Mostly I'm setting up a require.js project with a structure as below:
root
js
modulesType1
mod1
mod2
modulesType2
mod1
mod2
app.js
bootstrap.js
lib
require
require.js
lib1
lib1.js
css/img/partials/...
index.html
And an initial bootstrap.js a have a require.config object and an initial require:
/*global define, require */
require.config({
baseUrl: 'js',
paths: {
lib1: '../lib/lib1/lib1'
},
shim: {
lib1: ['something']
}
});
require(['lib1', 'app'], function (lib1, app) {
app.doSth();
});
In your html page you only need one script tag with a data-main attribute:
<body>
...
<script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>
Edit: modules don't have to be AMD compliant, but if they are under your own control, it is better to make them AMD compliant. You can make third party non-AMD libraries loadable using the shim property in require.config.