Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a script.js included in the website of my customer. This customer uses requirejs but he append script.js at the end of the body without explicitly using requirejs to load it.
In script.js i have libraries that are amd compatible and other not. The problem is that requirejs automatically load library which are amd. And i can't access them in my own library which is not amd compatible.
Do you have any idea ?
Thanks
RequireJs has the ability to "shim" configuration. In your requirejs configuration call, use the following (from the requirejs page). Backbone in this case is not a requirejs module and used as an example.
requirejs.config({
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
}
})
You can then use Backbone just like any other module:
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
If we want to create a service in an external library that we will install in other projects as a dependency how do we annotate the service?
Do we use use:
#Injectable({
providedIn: 'root'
}
)
Without adding a module configuration to go with it. What if we want the library's service to be registered in a lazy loaded module. How should that type of service be annotated and declared in the module loading the service?
For root loaded modules these are the steps
ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
Remove everything except for my-lib.service.ts.
And make sure to update public-api.ts so that it only exports the service:
/*
* Public API Surface of my-lib
*/
export * from './lib/my-lib.service';
Then build the library and install it into other angular projects. Angular will dependency inject the service when it is declared in the constructor of directives.
I'm still curious how to go about registering the service in lazy loaded modules consuming the library and how should the service be annotated in these cases?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a lot of js files in my View(html page),and I wonder if there is a way to
combine all my js reference to one ref .
You can use webpack to compile your javascript files and create a bundle file.
Webpack has a lot of documentation and tutorials.
If you're using .NET MVC, have a look at
http://www.asp.net/mvc/overview/performance/bundling-and-minification
If you are developing using plain JS & HTML, gulp could be an alternative with the gulp-bundle package.
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.js', {
appDir: 'app',
buildDir: 'dist',
minify: true
}));
which would take all js files in the app directory, bundle them and minify to the 'dist' directory.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to bundle through webpack or gulp+browserify except specified requires, for example ignore var module = require(pathToModule); so, that the resulting bundle also contain var module = require(pathToModule);
This can be done with webpack externals option
You can use the externals options for applications too, when you want
to import an existing API into the bundle. I.e. you want to use jquery
from CDN (separate <script> tag) and still want to require("jquery")
in your bundle. Just specify it as external: { externals: { jquery:
"jQuery" } }.
webpack.config
{
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
}
If you want webpack to ignore the external module and keep the require statement in the output you can use a null loader
loaders: [{
test: /#amperka\/.*/,
loader: 'null'
}
Use the externals setting in Webpack to specify that a required module will be loaded outside of the bundle.
{
...
externals: {
// require("jquery") is external and available on the global var jQuery
"jquery": "jQuery"
}
...
}
So then calls to require("jquery") from within your bundle will instead reference the global variable jQuery - this obviously requires that you have loaded jQuery before your bundle e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="bundle.js"></script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have around 40 JS files on all pages that needs to be loaded.How can I merge multiple js files into 1 JS file , So that I have to make less http request.
The best way is to use a task runner such as gulp. Read more on how to install it here
The following would merge all .js files in the ./assets/js directory into one file in the ./public/js directory.
// Require gulp
var gulp = require('gulp');
// Require plugins
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src(['./assets/js/*.js'])
.pipe(concat('main.min.js'))
.pipe(gulp.dest('./public/js'));
});
It is then possible to run this script with gulp scripts in the command line from within the project directory.
Use automation tools like Gulp or Grunt to concatenate, minify, build sourcemaps, and do everything you want with your sources. Sample build script looks like this:
var gulp = require('gulp'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('build-js', function() {
return gulp.src('source/javascript/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/assets/javascript'));
});
After that everything you need is run gulp build-js
I have developed JavaScript based web applications in the past and am now trying to understand RequireJS.
Almost all web apps have pages which would require some common JS and some page specific JS. I want to organize the entire web app using RequireJS.
So my question is can we do the same using RequireJS. If yes, how exactly is the breakup of JS done?
Let's say I have an app.build.js as follows;
({
appDir: "../",
baseUrl: "js",
dir: "../../appdirectory-build",
paths: {
jquery: 'libs/jquery/jquery-1.8.2',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-0.9.10',
templates: '../templates',
app: 'app'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
},
modules: [
{
name: "main"
}
]
})
Can we have multiple "modules" defined here (like we have the 'main'). Please provide more details.
Also RequireJS is said to be AMD. So what exactly is asynchronous over here?
Thank you.
Over the past few months I've thrown together a few example Mimosa built apps that bundle many modules for use in an app.
This one has nested main modules, 3 built files altogether: https://github.com/dbashford/MimosaNestedMains
It is a rather naive example, but you can see how one could portion out their app into small pieces and build each individually. To see the r.js run configs that Mimosa builds and uses, run mimosa build -oD. That will spew the debug logs to the console and that includes the r.js configs for each file.
Getting started with Mimosa: http://mimosajs.com/started.html