If I use require to import a module the error is: webpack_require is not a function.
If I use the import statement then its function are not working and I get a type-error.
Does webpack not work with bower?
You could resolve dependency using an alias. Refer https://webpack.js.org/configuration/resolve/?_sm_au_=iVV0dsf3NTdNVrRc#resolvealias
In webpack add the following config:
resolve: {
alias: {
jQuery: path.resolve('./bower_components/jquery/dist/jquery.js'),
...
}
}
In the application wherever you need jQuery import using below line (assuming you are using CommonJS module):
var $ = require('jQuery');
Hope this helps :)
Related
In my webpack-es6-angularjs app I struggle with a problem where I could need some help: When trying to load a 3rd-party library, the 3rd-party library raises an error, that jQuery is undefined even though jQuery is exposed through webpack.
//webpack.config.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
The 3rd-party library uses jQuery through !$window.jQuery.support... but $window.jQuery does not exist – NOTE the extra $ from angularjs – where as window.jQuery exists as expected form the webpack config.
monkey-patching the 3rd-party library works but of course is to no solution. Any idea where this can come from and how this could be solved?
Okay, so I was able to solve it by explicitly injecting jQuery into the angularjs $window object:
import * as jquery from 'jquery';
import { IWindowService } from 'angular';
function jQueryService($window: IWindowService): any {
$window['jQuery'] = jQuery;
return jquery;
};
jQueryService.$inject = ['$window'];
export default jQueryService;
I have two project using webpack. Now I want to bring one project as module of other project. I can get the two bundle created but don't know how to import from the other bundle.
Elaborating a bit:-
Lets say the other file from which i want to import looks like as follows:-
index2.js (Bundled as bundleTwo)
import SomeCompoent from "./components/SomeCompoent/SomeCompoent";
module.exports = {SomeCompoent}
and in the file (is in another bundle - bundleOne) below I want to import the component (somecomponent):-
index1.js (in bundleOne)
import {SomeCompoent} from "bundleTwo";
but here bundleTwo is undefiend
Any help is highly appreciated
One way that I have figured out myself, is that using alias this can be achieved.
To make this line import {SomeCompoent} from "bundleTwo"; work, bundleTwo can be defined in alias :-
config:{
resolve: {
alias: {
"bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>")
}
....
If you want to use webpack only,then just set the libraryTarget to 'umd' in bundletwo webpack configuration.
In order to be able to import this module, you need to export your bundle.
output: {
libraryTarget: 'umd',// make the bundle export
filename: "index.js",
path: path.resolve(__dirname, "dist"),
}
However, this can also be achieved by just using Babel to transpile your ES6 code to ES5 code.
babel index2.js --out-file dist/index2.js
Now set the main in package.json to "dist/index2.js"
Now you can use it like
import {SomeCompoent} from "bundleTwo";
You can also create a gulp script for that
gulp.task('js', function () {
return gulp.src(['packages/**/*.js', "!**/*.test.js"])
.pipe(babel({
plugins: ['transform-runtime']
}))
.pipe(gulp.dest('dist'));
});
When using SystemJS for writing an Angular2 app I can do a
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'rxjs': 'node_modules/rxjs'
};
to tell angular where to find things when I call a import {} from. In this case if I wanted to use RxJS now I could import { Observable } from 'rxjs/Rx'.
But what would the equivalent of this be if I were using Webpack?
Webpack does that automatically. Unless you are using code splitting.
Suppose you have:
Module A:
import {fn} "moduleB"
Module B:
export default fn
Webpack will include all the dependencies of module A (your entry), so you will be able to use fn.
Now if you use code splitting, you will need to use require.ensure
e.g:
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
I'm trying to use angular-material with a ng-metadata project and I run into some issues.
I use DefinitelyTyped for angular material and the first lines are:
declare module 'angular-material' {
var _: string;
export = _;
}
In my main.ts I try to import { ngMaterial } from 'angular-material';
then bootstrap( AppComponent, [ 'ngMaterial' ] ); but all I got is:
Error:(3, 10) TS2305: Module ''angular-material'' has no exported member 'ngMaterial'.
I don't know what I am doing wrong
When being used through ES6 or TypeScript, a common pattern that Angular modules follow is that they'll use their name as the default export. For example, one of the modules in my application looks like this:
const session = angular.module("smSession", [])
.service("session", SessionService)
.component("smLogin", Login)
.config(routes)
.run(loginRedirect);
export default session.name;
The reasoning behind this is that it makes the syntax for declaring an Angular module's dependencies cleaner; for example:
import angular from "angular";
import ngAnimate from "angular-animate";
import ngMaterial from "angular-material";
import uiRouter from "angular-ui-router";
let module = angular.module("myApp", [ ngAnimate, ngMaterial, uiRouter ]);
If they instead exported the entire module, you'd have to do this:
let module = angular.module("myApp", [ ngAnimate.name, ngMaterial.name, uiRouter.name ]);
So this is why the main module declaration for angular-material looks like it does - they're simply representing the fact that all you can import from the package is that one string representing the module's name. The rest of the type definitions are ambient - you can just use the angular.material namespace anywhere in your application without having to do an import.
EDIT: To clarify, here's the actual source of the file that gets imported when you import ngMaterial:
// Should already be required, here for clarity
require('angular');
// Load Angular and dependent libs
require('angular-animate');
require('angular-aria');
// Now load Angular Material
require('./angular-material');
// Export namespace
module.exports = 'ngMaterial';
Notice that require('./angular-material') doesn't return anything - that import effectively just runs the file that sets up the Angular module behind the scenes (effectively the same sort of code as in my examples). The only thing being exported from the module is the name.
I tried using angular-timer with webpack, es6 and the npm modules of moment and humanize-duration
My implementation would be:
import 'moment';
import 'humanize-duration';
import 'angular-timer';
And I get the error ReferenceError: humanizeDuration is not defined.
Sure, angular-timer needs the variable humanizeDuration and suggests in the requirements section to use bower and script src. In my understanding importing the src with webpack is the same as using it as src in a script tag.
This help for me:
Install moment and humanize-duration:
$ npm install moment
$ npm install humanize-duration
Install them in your webpack.config.js as plugins:
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
config.plugins = [
new webpack.ProvidePlugin({ 'moment': 'moment', 'humanizeDuration': 'humanize-duration' })
];
And import angular-timer in your component
import 'angular';
import 'angular-timer';
let yourModule = angular.module('your', [
'timer'
]);
I hope this will help you