I've a durandal WebApp which uses require js to load modules.
There's a shim configured for tinymce. It works OK when using the non-optimized version.
When I use r.js to optimize the code, I want to exclude tinymce from the bundle, but it's always included.
Does anyone know how to exclude the shims from being included in the optimized build?
I'm using gulp-durandal, and I've successfully excluded other modules, using the excludeShadow setting, but it doesn't seam to work for shims, or I'm doing something wrong.
EDIT:
I managed to fix the problem by manually setting in the gulp-durandal file the exclude array in rjsConfigAdapter. For some reason the moduleFilter function didn't excluded the files, but the exclude array did the job
Try something like paths.tinymce=empty: in your r.js command line call.
Or this (in your require config), if you use it via Grunt.js or something:
paths: {
tinymce: "empty:"
}
Related
I'd like to require a module on a folder, as a plugin. So I want the user to be able to add JavaScript files into an already compiled electron/webpack application and having my application load and execute it. So it would be like a plugin system. I have tried requiring every file inside the plugins/ folder but it turns out that it just gets bundled into bundle.js when compiled, and I want to be able to change it after compiled, like a plugin. How can I accomplish this?
I think what you're looking for is global.require as stated in this similar question.
Note that as it's Node's require, it will cache required module, so modifying a plugin's code will not have effect until you restart your electron application so that it does call global.require again. If that is an issue, you can force-reload a specific module with this (unrecommended) snippet:
delete global.require.cache[global.require.resolve(moduleName)]
I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';
I'm building an app that will contain many js (jquery) modules (files) using the following setup;
The build is run using Grunt task runner.
I use handlebars templates, then generate the html from *.hbs files.
During the build, I uglify all the js files into one minified file.
I call the minified file in my application <script src="assets/js/app.min.js"></script>
Now, I want to use requirejs to organize my code and adhere to the AMD specifications..
But I got 3 problems with this approach:
I need to have 1 single minified file for all the js; this keeps my code harder to "decode" thus to copy (since it is mixed with other dependencies; jquery, modernizer..) and also helps avoid extra http requests if scripts are called individually.. However, requirejs needs a main file to initialize the app and inside that main file It calls the other required files.. I don't have such configuration.
Many of the dependencies I'm using are in a bower package (that I don't include in the distribution); this makes it not possible to call those files using the suggested requirejs method.
I'm using jquery on this with some 3rd party plugins that don't call define(); to make them work I have to use shim config which again rises the problem #2!
So how am I supposed to take advantage of requirejs while keeping my code in modules and well organized?
Sorry for the long question and thanks for reading :)
ps: Feel free to change the title of the question as I couldn't find a better one!
I finally opted for AngularJS as it adheres to my setup above and allows me to split my app into manageable small modules.
I have also the possibility to use the ease of jQuery (even though it is not a best practice among angular community) and much more.
I'm working with the Hot Towel SPA template and I'm trying to add in some data that I want to get from breeze. I have the breeze nuget package installed and the breeze script files are in the scripts folder of the site.
I can reference it by using the actual file name like the following:
define(['durandal/app', '../scripts/breeze.min.js'], function (app, breeze) {
...
});
However, this will break when my site is running in release mode and the script is actually bundled. Plus, it is really ugly and feels like a hack to put the full name in there.
What is the correct way to do this?
By default Durandal loads external libraries via normal script calls not via requirejs. Same is true for HotTowel.
e.g. https://github.com/BlueSpire/Durandal/blob/master/index.html#L31
or if your platform supports it via bundling
https://github.com/johnpapa/PluralsightSpaJumpStartFinal/blob/master/SPAJumpStart/App_Start/BundleConfig.cs#L18
Simply load breeze before requiring main.js and you should be good to go.
Is it possible to require another requirejs app (with its own config) as a requirejs package? Say I have my main app and I want to require my standalone calendar widget. Is that possible?
Thanks in advance
edit
One way could be to require the optimized version of the widget?
RequireJS and CurlJS (the more commonly-used AMD loaders) allow you to re-configure local scope. See multiversion support docs
However, here is just a thought:
Rely as little as possible on config. It is very possible to set up only true generic, global things like jquery, underscore paths in global config and just roll named defines inside your widget for local packaging needs. For every config option James invented, there is a valid way to do it without a config.
Shim can be easily emulated locally with nested require calls. Putting all plain JS aliases inside paths is perhaps useless because you can just as easily use direct refs to the plain js files "path/to/file*.JS*"
In reality, you don't really need config that much. Get away from needing it and your problem is simplified.