We have a Sencha ExtJS7 based classic application using a package that requires a lot of js files to loaded seperately (read can not be bundled). So we are loading them via package.json js config
"js": [
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/ace.js"
},
{
"path": "${package.dir}/resources/ace-builds-master/src-min-noconflict/theme-monokai.js"
},
<snipped................>
So there are many files that are to be loaded seperately and should not be bundled into one
When production/testing build these files are loaded before app functions.
Is there a way to load these files either when a panel that requires them are added to screen or at defer them after app is loaded and starts working
First, if you want to do this, you can't bundle the javascript into your app; all bundled code will get loaded as part of the bootstrapping of the app.
Second, there are vanilla JS ways to load more scripting code, but the way to do it with ExtJS is Ext.Loader#loadScript
Another way to do it, if these are ExtJS packages (and not arbitrary NPM packages) would be to declare the packages in the 'uses' section of the app.json, which would allow you to load them dynamically with Ext.Package#load
Related
Our application should have a main app and is consists of multiple modules and these modules have their own git repository.
The goal is to use the main app and turn the modules into packages that should only be referenced or called in the main app. Just like a DLL in C# or a component in Angular.
Now, I have looked thru sencha docs and all I can see is consolidating the modules into one single directory/workspace. We don't want to go that way because the modules have their own repo and the "main app" will also have its own repository.
Please recommend the best path to take.
I guess the simplest way is to define the workspace for the package inside each repo by adding this as workspace.json:
{
"frameworks": {
"ext": "ext"
},
"build": {
"dir": "${workspace.dir}/build"
},
"packages": {
"dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",
"extract": "${workspace.dir}/packages/remote"
}
}
Now you need to link (symlink suggested) or copy the framework under /ext
Lets say you have the following structure
/root/workspace.json
/root/ext
/root/packages/local/yourModule
Now you can go to /root/packages/local/yourModule
and call
sencha package build
This should produce the package and js-files.
You will find the js files under
/root/packages/local/yourModule/build/yourModule.js
/root/packages/local/yourModule/build/yourModule-debug.js
These files can now be loaded on demand from your main app.
Depending on your needs you can optimize the build by adding
skip.sass=1
skip.examples=1
skip.slice=1
skip.pkg =1
in your package.json - or for legacy sencha cmd packages inside
/root/packages/local/yourModule/.sencha/sencha.cfg
A different approach could be by using another build tool.
You need to do inside:
/root/packages/local/yourModule/src
(put the files in the right order)
concat
remove whitespace *
uglify *
star means only relevant for the debug version of your module (package).
This is more less what a standard sencha cmd package build does.
I tried it successfully with grunt.
I'm currently using Webpack to manage configuration for my React JS app.
I have a config.development.json file that is loaded by my development build script. It contains
{
"primary1Color": "pink"
}
It's loaded in the Webpack script as follows
externals: {
configuration: JSON.stringify(require("./config.development.json"))
}
There's a similar set up for production builds.
I reference the config parameters in my app as follows
import configuration from "configuration";
const mainColor = configuration.primary1Color;
This is all working.
However, I'd like to allow the settings to be configured post-deployment---i.e. have the app read the config file when it runs. Then, if customers wish to change the color scheme, they can do so without me having to rebuild the app.
How can I get the app to dynamically load my JSON config file?
You don't have to bundle it with webpack. You can use normal ajax call to load the json or use script.js.
https://github.com/ded/script.js
However if you really want to use webpack loader, you can try external-loader.
https://github.com/sheerun/external-loader
More discussion here:
"Require external (unmanaged) file"
I think the best approach would be to create an API endpoint that react interacts with to load them.
I'm using Webpack as our build/bundler for an application using a standard React/Redux/etc.
We have a requirement to build out custom components that can be loaded dynamically into the main application. This would require that the component is created OUTSIDE the main development so would not be involved in the main app build. The ideal solution would be to build out the components in their own side projects, bundle up (since they will have imports/require, etc) and spit out a bundle.js file that is only that component (could be multiple components merged together). Then we'd like to be able to take that file and dynamically load it in the main application dynamically.
I understand how code splitting works with webpack to a certain degree which we use in our main project. I've also been able to successfully import SIMPLE components externally I built out externally. The problem is that these external components can get pretty hefty so using a build/bundler to put it all together in one package would be ideal. I have no idea how to go about building components externally from the main project, bundle up using webpack to merge in all of the goodies into one package and inject that new bundled component which is typically wrapped in webpackjsonp and all the other runtime stuff.
Has anybody else been able to do something crazy like this?
Thanks!
EDIT
I've been able to successfully build a silo component in it's own project using webpack and dynamically loading that into a different running application bundled with webpack by using the Output.Library options as described here
Below is the sample config I used for testing a custom react component called TestMe located inside the index.js file of the test folder.
module.exports = {
entry: {
developer: "./test"
},
output: {
path: path.join(__dirname, "dist", "static", "developer"),
filename: "MyLibrary.[name].js",
library: ["MyLibrary", "[name]"],
libraryTarget: "var"
},
externals: {
'react': 'React'
, 'react-dom': 'ReactDOM'
, 'react-dom/server': 'ReactDOMServer'
, 'react/lisb/ReactTransitionGroup': 'React.addons.TransitionGroup'
, 'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup'
}, ...
When imported in you will have access to the TestMe component as a global variable MyLibrary.developer.TestMe (or MyLibrary.developer.default depending on how you exported the component). The externals are there to keep Webpack from including those in the final bundle which was already included in the main application. Otherwise you're going to get a really big nasty bundle file. Check out LibraryTarget if you rather have UMD, etc.
Moral of the story here is "when all else fails, read the docs again".
When developing I want to use a a minified .js file of Ext JS 5.1 like they do on Sencha Fiddle. It looks like you can use the cdn link from Sencha but when I use this in the index file it fails.
Is there something I need to be doing in the bootstrap.js file to make it use just a link instead of the Ext Js 5 root folder? I want to use the same link for multiple apps hosted on a server for an enterprise situation.
Also, the Chrome Dev Tools running super slow having to load each file. I want to use one minified file to make this useful again.
I'm not positive how you could use the cdn file referenced in the sencha fiddle website. Adding that link directly to the app while using the microloader would cause errors. The microloader in extjs5 automatically figures out which files to load in the framework.
However, you can achieve a similar goal of using a minified version of the extjs framework if you are using sencha cmd.
They detail how to setup your project to use the minified or developer copy of extjs5 instead of loading all the seperate files in this forum post
Here are the changes to make to your project documented to stack overflow in case that forum post is no longer available:
Step One
make sure you are using a version of sencha cmd greater than 5.0.2.
To determine your version of sencha cmd you can type the following in the command prompt:
sencha which
If you have an older version of sencha cmd you can download the latest copy here
Thanks to Niederee for this little advice, do a sencha app upgrade on your app to make sure it's tied to the latest sencha command build
sencha app upgrade
Step Two
Adjust your app.json manifest file to load the ext-all-rtl-debug.js . Add this file to the "js":[] array in the file:
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js" // new default for generated apps
},
{
"path": "app.js",
"bundle": true
}
],
You can also add sencha charts if they are required to get that minified build too:
{
"path": "${ext.dir}/packages/sencha-charts/build/sencha-charts-debug.js"
},
Optionally you can also adjust the cache preferences based on dev/production
Add this additionally to the app.json file:
"development": {
"loader": {
"cache": true
}
},
"production": {
"loader": {
"cache": "${build.timestamp}"
}
}
Step Three
In the command prompt run the following sencha command to refresh your application's bootstrap manifest.
sencha app refresh
I need to load entire package on demand. This includes JS and CSS. Package is build up and ready.
Is there any way to do that?
ExtJs 5.0.1
Building the package with sencha package build creates build directory in which you can find resultant javascript files, such as:
build/package.js
build/package-debug.js
where "package" is the actual package name.
Similarly, CSS and resources are placed in
build/resources/package-all.css
build/resources/package-all-debug.css
Loading the package would actually mean to load build/package.js and build/resources/package-all.css at runtime.
The implementation is also easy: inject appropriate script and stylesheet link tags in the page head.
You can find an example of loading css at runtime here: http://extjs.eu/examples/#theme-colors