I'm trying to embed an EmberJS application into a large portal application which uses extensively the RequireJS library. I'm using ember-cli to build the project. The built application consists of two files, dist/assets/vendor.js and dist/assets/myapp.js. The EmberJS application works after embedding it but the portal app's javascript breaks.
After some research I've found out the problem is that vendor.js defines its own variables require, requirejs, requireModule and define which conflict with the website's variables in the global namespace. The myapp.js file then contains define statements which load the app's modules.
Is there a way to rename these or to put them into some different namespace?
The only solution I came up with was to manually rename the variables within the two .js files. This seems to work but it's rather cumbersome and it'd be nice if it could be automated. I have also found out about using RequireJS optimizer but I can't get it to work with the vendor.js file.
Can you help me?
Thanks!
I was having the same problem, and after much searching I believe I managed to solve it by adding the ember-derequire addon to my project:
ember install ember-derequire
That will change all of the 'require' and 'define' statements in your app to 'eriuqer' and 'enifed'. You can override what it maps to using options (caveat being you have to use something the same length) if you don't like eriuqer and enifed.
In case that doesn't help, the other promising thing I found is that loader.js has a noConflict() function, but I couldn't figure out where to put the loader.noConflict() call, or get the build to generate code using alternate names, but maybe it will help you if the first option doesn't work for your situation.
As #Bjornicus (https://stackoverflow.com/a/39088322/5056421) wrote, built-in loader.js's noConflict() function seems to work correctly. I placed it in main JS file (app.js):
window.loader.noConflict({
define: "emberDefine"
});
and define wasn't overridden (I import ember app to another app which uses SystemJS). But I've made only few tests, so I don't know if this does not break something later.
Related
I'm working on an old Codeigniter website where the Javascript codebase is messy and poorly structured and I would like to use Webback to manage the scripts. My goal would be start using it to bundle the code I have the way it is, and gradually refactoring it to make use of modules and imports.
At the moment I'm using Gulp on development (but mostly to minify the files) and Carabiner (a Codeigniter library) to insert the scripts in the views.
The scripts, which are all written as IIFEs are not bundled, so in every controller function I have an array of the scripts needed in that page. For example:
public function homepage()
{
$this->carabiner->js([
['libraryThatIOnlyNeedHere.min.js'],
['myscript1.js'],
['myscript2.js'],
['myscript3.js'],
]);
I would like to use Webpack to create a series of bundles so that I end up loading maximum two files on every page: one for the libraries and one for my scripts.
All the practical examples I've seen with Webpack, though, are for Single Page Applications where it's quite easy to bundle everything together.
What would be the best approach in my case? Considering that the code is still not ready to properly use modules and imports, shall I create many entry points in the Webpack configuration file, possibly one for every page and list every script needed in that page?
Main idea behind webpack is to build modules graph from provided sources and then to combine it into bundles. If your code doesn't have explicit dependencies - it may be good idea to start with creating a module from every file using any of available approaches (AMD, CommonJS, etc). You will need to create module identifiers and define dependencies for every module. It may be worth to read this article for example.
As intermediate step you may want to use some loader like Require.JS to load your modularized code.
Until this step will be done - there is not much use of Webpack.
I'm trying to create angular ui-component, and use it in other angular applications.
I met many problem with angular-cli and decided to get rid it from my project, since it is not ready for building library.
I tried to use webpack, but had a problem with building d.ts bundle(I used dts-bundle, but it can't build bundle with all imports well).
When I created d.ts bundle manually, I realized that project which use webpack don't work correctly with bundly already built by webpack (a lot of errors with third party, module resolution, polyfills).
When I build project with typescript, it worked well, by angular templated (app.component.html), which I don't want to include in my package.
The best way, I think, manage to use something like angular-template-loader
with typescribt compiler, but I don't know how.
May be there is better approach for it, but I read a lot of topics and have't figured it yet.
Thank you.
I am trying to use a third party .js library in Angular 2 / Typescript application. There are some examples on the web (like using declare var libraryVar: any;) but nothing seems to work. Is there a one correct way to integrate a .js library into a Typescript / Angular2 ?
There are some examples on the web (like using declare var libraryVar: any;) but nothing seems to work. Is there a one correct way to integrate a .js library into a Typescript / Angular2
Perhaps you forgot to put the declare var libraryVar:any; in a vendor.d.ts file that has no root level import/exports.
More : https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html
The web is full of examples of typescript projects consuming 3rd party libraries.
Here is one of mine which uses arcgis-js-api.
And Here is one that uses openlayers.
In your case you would try this:
bower init
bower install node-uuid --save
tsd install uuid --save
Then setup your tsconfig.json file. I think Angular 2 uses systemjs so you'd want to set module="system" (see system) unless you have a reason not to.
I haven't had much luck with systemjs but you might need to do something like this to get it to load uuid or any other AMD modules:
window.define = System.amdDefine;
window.require = System.amdRequire;
See system-api for an explanation.
The best way I have found to use an external library is to create a variable for it at the top of your typescript and import the js. By doing so the variable will offer all the functions the library provides inside your TS without any extra work.
for example if you want to use moment.js to do some time computation.
add this to your ts file
var moment = require("./scripts/moment");
after that you can use the functions inside your typescript by directly using the variable
moment.fromNow("SOMEDATE");
I faced the exact problem couple of days ago and I saw this is a good fit, Another neat way is to create a typescript class with all the helpers and reference the typescript to your file and call the helpers within. Still experimenting on a solid pattern, but this would be the start point.
I have written a self contained angular js module using browserify in order to make use of the commonJS/Node style syntax.
The module works fantastic when tested by itself, so I then use gulp to minify and host that on GitHub.
I've then imported that into another app that is also using browserify. When I run browserify it seems to try and rebrowserify the module and causes no end of problems.
I believe this is because the module requires angular and jquery and qtip2. So it's obviously trying to re parse these.
Is there a standard to not parse modules, or is there a way to exclude the browserifying of the modules? Or is it best to not include things like angular and jquery within your modules? I was trying to make them perfectly stand alone, maybe that's unwise?
Many thanks!
I would suggest providing both options, if it is important for you to have a standalone version that includes angular. This will provide people using your code with a total of three ways of using your code: Using the standalone version, the version that only includes the module, and cloning the repository directly and including the source files as part their build process.
I generally use the third option, but people who don't have build processes will likely prefer the first or second.
I'm trying to incorporate a Twitter Bootstrap template with Meteor and I'm having trouble understanding how I should include files. For example, let's start with Bootstrap itself, should I install it with Meteor/Meteorite or do it manually with script includes? Same for other javascript plugins (e.g. jquery <- this one is builtin to Meteor right?, lightbox.js.. etc.)
Hope I'm making sense, thanks!
By default meteor already includes jquery.
It's best to look to get your plugins installed via Meteorite. So something like this could get you started
sudo -H npm install -g meteorite
Then in your project directory
mrt add bootstrap-3
For other plugins you can't find on atmosphere add the files into a directory in your project /client/lib. Meteor will automatically reference the files for you, both css and js.
This way they only run on the client side and are loaded first. (such as lightbox.js)
You might have to modify a few files with Meteor, though. In meteor each file's variables are file-scoped. So you can't access them from other files. (meteor basically throws a (function() {..}).call() around the code.
So if you get some kind of issue about a variable being undefined look for the variable and remove the var keyword and remove it so that the variable/method becomes global. With jquery plugins this usually isn't a problem.
Most that have the variable scoping issues are on http://atmosphere.com so you shouldn't run into too many problems.
The most common libraries such as jQuery and Bootstrap (v2.3.0) are provided by the Meteor core (v0.6.6.3). They can be listed using meteor list and included with meteor add.
As referred before, Atmosphere is a collection of unofficial Meteor packages giving an easy way with Meteorite to include even 3rd party solutions to your own project.
Moreover, you should learn the Meteor App structure. Directories created on your project have different preferences in terms of files visibility and loading order. I recommend reading Ritik Malhotra's presentation about the App structure at http://www.slideshare.net/RitikM/building-a-production-ready-meteor-app. There's also a Youtube video about his presentation that can be watched here http://www.youtube.com/watch?v=gfFGjmiKfnA.