Im quite new to webpack, this is my scenario
I have an Angular 1.5 application working with webpack, it didn't used to include the vendor libraries since the application loaded them from a CDN.
This is changing so I needed to also bundle the 3rd party libraries, looking around I added this to my webpack.config.js:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => /node_modules/.test(resource),
filename: 'vendor.bundle.js'
}),
This worked prety cool, including only what was imported by the app instead of pulling whole libraries.
My problem is how to include, in the vendor file, the 3rd party modules that my angular application is using, for example, having this:
import * as ng from "angular";
import { IStateProvider, IUrlRouterProvider, IState } from "angular-ui-router";
ng.module('fmacapp', ["ui.grid", "ngDialog"]).config(["$stateProvider", "$urlRouterProvider", (stateprovider: IStateProvider, urlRouterProvider: IUrlRouterProvider) => {
//State config here
}
How can I include the ui.grid and ngDialog in the vendor file, since they are not being imported into the app, is there a way to do this dynamically?
Related
I have my create-react-app bootstrap workspace setup to support module imports using #app/ as my root module.
I achieve this by adding this to my webpack config
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'#app': path.resolve(__dirname, '../src')
},
However this does not seem to work with my jest tests. Anytime something is imported with #app the import is not resolved.
Anyone have a good solution to this
I have a regular ol' requirejs app, that pulls in modules in regular JS I write. I really want to start using reactjs but am not even able to get it to load with out throwing errors in the console.
My Paths
'react': '../node_modules/react/cjs/react.production.min', // there is a cjs and a umd (Universal Module Definition) version, I dont think I am UMD. we are Asynchronous Module Definition (AMD)
'reactDOM': '../node_modules/react-dom/cjs/react-dom.production.min',
'JSXTransformer': 'vendors/react/JSXTransformer-0.10.0',
'jsx': 'vendors/react/jsx',
Is it possible that there is a shim dependency that I need to setup?
'react' : {
'deps' : ['jquery']
},
'reactDOM' : {
'deps' : ['jquery']
}
I have also included them normally such as
require(["jquery", "jqueryUi", "bootstrap", "react", "reactDOM", "front", "owlCarousel", "select2", "blockui", ], function ($, jqueryUi, bootstrap, React, ReactDOM, front, owlCarousel, select2, blockui) {
$(document).ready(function(){
require([ $('#requirePageSpecificJs').val() ]); // this is set in php, result: "/require-mturk.js"
});
});
I get this error, when loading a page.
I am completely new to React, so I may be missing some things. Does the latest react require Babel to run, and if so do I need to include babel as a package, and add that as a shim? I am seeing some other posts of using requirejs with react but it is requiring different tools and stuff. completely lost here.
We have requirejs.
I have mentioned the paths and the shim in requirejs.
Here, when I load the controller in angularjs router, the files are loading separately.
require.config({
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: 'Folder',
waitSeconds: 200,
paths: {
// Jquery
'Angular': 'Angular path',
'FileA': 'FileA',
'FileB': 'FileB',
},
shim: {
'FileB'{
Deps:'FileA'
},
'FileA'{
Deps:'Angular'
},
}
When I require FileB, it will automatically retrieve fileA and angular file.
But in this case, I am requesting three http request for the three files.
Is there any solution that, based on requirejs structure bundling the files?
So that when I request the file, I will get the single file instead of multiple files
If there is any dependency between the files that you are trying to bundle then bundling them in separate files doesn't make any sense.
However if you are sure that dependencies would not be any problem you can use bundle a new feature from requirejs:
requirejs.config({
bundles: {
'shared': ['angular'],
'fileA': ['fileA'],
'fileB': ['fileB'],
// etc...
}
});
Also you can add your template to the bundle which is awesome. More info here.
Now I am using react-route to control my routes!
You know I tried to build a single page app. There is only one entry file named
index.js
When index.js is too heavy loading time will very long. Maybe 10000ms.
But there are many routes why must loaded them all first? If I can lazyload route not only child routes.
When I go to admin route it will load js file of admin and about will load js file of about , can I?
webpack bundle will have two files [name].js and come.js. But it too heavy.
Anyone meet the same problem?
You can do lazy loading of React Components with react-router in two ways.
Webpack's require.ensure way
When you go with this approach, you would be dealing with the react router object something like this,
childRoutes:[
{
path:"/pageone",
getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageOne"));})
},
{
path:"/pagetwo",
getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageTwo"));})
}
]
Webpack's bundle-loader way
When you go with this approach, you would be dealing with the webpack loaders option.
module: {
loaders: [{
test: /.*/,
include: [path.resolve(__dirname, 'pages/admin')],
loader: 'bundle?lazy&name=admin'
}]
}
You can find an example from react-router which uses bundle-loader and here is a nice blog about lazy-loading with bundle-loader and here is a blog with require.ensure
I'm building a react app with webpack and i need to incorporate arcgis maps into a react component. I have know idea how to bring this into my project. I've tried creating an arcgis directory with an index.js of the built javascript and trying to reference that:
import {Map} from 'arcgis/index'
That doesn't work. I then just tried to include the css/js script tags directly into my index.html but when I try to require them, like in the example, webpack obviously can't find them. Is there some way to tell webpack to ignore require calls in my src file so it gets handled by the browser? I'm trying and failing at doing the following:
import React from 'react'
export default class EsriMap extends React.Component {
componentDidMount() {
const _this = this
require(["esri/map", "dojo/domReady!"], function(Map) {
var map = new Map(_this.refs.map, {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});
}
render() {
return (
<div ref="map"></div>
)
}
}
You may want to try this https://github.com/tomwayson/esri-webpack-babel .
This method is nice because it doesn't bog down the build. You pull in the ESRI Api from the CDN, and tell webpack that it's an external.
//Add this...
externals: [
// Excludes any esri or dojo modules from the bundle.
// These are included in the ArcGIS API for JavaScript,
// and its Dojo loader will pull them from its own build output
function (context, request, callback) {
if (/^dojo/.test(request) ||
/^dojox/.test(request) ||
/^dijit/.test(request) ||
/^esri/.test(request)
) {
return callback(null, "amd " + request);
}
callback();
}
],
//And this to you output config
output: {
libraryTarget: "amd"
},
When your app loads you bootstrap you webpack modules using Dojo in a script tag.
<!-- 1. Configure and load ESRI libraries -->
<script>
window.dojoConfig = {
async: true
};
</script>
<script src="https://js.arcgis.com/4.1/"></script>
<!-- Load webpack bundles-->
<script>
require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { });
</script>
I've got it working with an Angular 2 App I'm working on. The only downside is I haven't yet got the unit tests to run right using Karma. I've only been working on that a few hours now.. Hope to have a solution to the testing issue soon.
#getfuzzy's answer will work well as long as you don't need to lazy load the ArcGIS API (say for example only on a /map route).
For that you will want to take the approach I describe in this answer
This blog post explains why you need to use one of these two approaches and explains how they work as well as the pros/cons of each.
I think you can try using bower version of esrijsapi. Doc link