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)
}
});
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 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')
}
}
Have require js working fine without the bundles. But whenever i use a bundle, i get timeouts for the modules i am trying to import.
Here is how i build the bundles with the asp.net mvc bundler/minifier
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
Heres is the require js config in the cshtml file:
<script>
require.config({
baseUrl: "/scripts",
paths: {
jquery: "jquery-1.11.2"
},
waitSeconds: 20,
shim: {
bootstrap: {
deps: ['jquery']
}
},
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
}
});
require(["app/main/test"]);
</script>
And the js for the page (app/main/test):
require(['jquery', 'moment'], function ($, moment) {
console.log(moment().format());
});
Jquery, bootstrap and moment libraries are in the test bundle i have created, but i get load timeouts loading the page for moment.
Here's the chrome inspector error:
Any ideas?
thanks in advance.
This is happening because you are not requiring your bundle at all. Your require call has only jquery and moment. You have provided jquery file path, so requirejs uses that path to download and provide jquery module. But since there is no path definition for moment, it is only part of the bundle that you have created. So requirejs tries downloading moment by its module name as path and thus throws an error.
A simple fix for this is to require bundle itself.
require(['#Scripts.Url("~/bundles/test").ToString()'], function(bundle){
//At this point jquery, moment and bootstrap will be loaded.
});
You can choose to use jQuery, moment from global namespace in above example directly or you can try requiring them seperately in below example. I am not sure, but you may get into error with below example because of cyclic dependency.
require(['#Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){
//At this point jquery, moment and bootstrap will be loaded.
});
Just remove 'jquery' from your bundles
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
}
...
You already have it specified in the paths
paths: {
jquery: "jquery-1.11.2"
},
It seems require.js maps the modules to bundles so that once a module that is part of a bundle is loaded, that bundle is not loaded again.
I'm having problems using canJS together with stealjs, i've cloned the repo of javascriptmvc (3.3 use canJS). Now i've this folder structure
/js
/can
/documentjs
/funcunit
/plugins
.
.
.
In another part of my application i've a "standalone module" e.g layout (generated using the scaffolding tool).
I load this module using "js/steal/steal.js?path/to/module/layout" inside my page and it works. If I stole some jquery plugins (e.g. located in the main js folder) inside my layout.js like so:
steal('plugins/jqueryplugin.js', 'plugins/jqueryplugin.css', function() {
// my code here
});
it still work, but when i try to add in the list of "dependecies" some component from "canJS" (even fixture.js generated with the tool...because it stoles can.fixture) it just stops to work and breaks everything. I've also tried using:
steal('that').then('this', function() {});
But i've the same results.....fail!!! anyone have any hints?
Ok i found the problem. There is nothing wrong with stealjs and canjs, but
canjs just load its own version of jquery
that will break my application. Now I need to find a way to load canjs and jquery separately (i use yii and some extensions need to have jquery loaded at a certain time so cannot wait for canjs).
Is the issue the version of jQuery or the order of dependencies?
You can configure steal via the stealconfig.js to use another version of jQuery and manage any dependencies.
An example can be found in the github repo: (this example does not show dependencies so i added one below)
https://github.com/bitovi/steal/blob/master/stealconfig.js
steal.config({
map: {
"*": {
"jquery/jquery.js": "jquery", // Map to path
"bootstrap/bootstrap.js": "bootstrap",
"can/util/util.js": "can/util/jquery/jquery.js"
}
},
paths: {
"jquery": "can/lib/jquery.1.8.3.js", // Path to jQuery
"bootstrap": "lib/bootstrap.js"
"yui/yui.js" : "can/lib/yui-3.7.3.js",
},
shim : {
jquery: {
exports: "jQuery"
},
bootstrap: { // A dependency example
'deps': ['jquery']
}
},
ext: {
js: "js",
css: "css",
less: "steal/less/less.js",
coffee: "steal/coffee/coffee.js",
ejs: "can/view/ejs/ejs.js",
mustache: "can/view/mustache/mustache.js"
}
});
Note: this is an untested example, hope this helps.
i had problem too with stealJs i have known that it work well with JavascriptMVC,
now i'm using AMD requireJs to dependency manage, an it works great with canjs.
here is the documentation http://canjs.com/guides/using-require.html, i hope that it help you!
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.