I'm using browserify to create a bundle file of my app.
This app get from some rest a list of js file links, each link is a bundle of tool that my app should import and init the imported tool class.
My problem is that browserify doesn't support dynamically import/require like require('www.example.com/myTool.js'). It only knows to require modules from his bundle which I created on the build process.
Do you have any idea how I can keep using browserify and still require files on the fly? I try to import requirejs and systemjs but I had some problems to create a bundle with browserify.
I can force the tool's developers to support any kind of require mechanism, even something I can make. so fill free to write any kind of solution you think.
Thanks
Related
I have 2 apps that have Highcharts already installed
and I developed a separate react component that uses the Highcharts lib.
So I used webpack to generate that component with its dependencies to be imported into the 2 apps.
I did that to make the code DRY so I don't have to write the component code into 2 Apps.
How to import the generated output file from webpack into these apps without giving me the error of reinitializing Highcharts?
In other words how to import the file without any conflicts with the already installed libs in the Apps?
Update
I want the lib to be in the bundled file when in case of importing it into an application that doesn't have the lib.
Update II
I want the lib to be in the bundled file when the client application doesn't have the lib, and when the application has the lib the bundled library is the one that is used by the component.
If you know that environment of your code already have some library you can exclude this library from bundle using externals: https://webpack.js.org/configuration/externals/
Lets say we make a react components library and we need to install react, but we know that we will use our components in our react application where react is already installed.
So, we can mark react as externals in our webpack config like:
module.exports = {
// ...
externals: {
react: 'React'
}
// ...
};
Also we can use DllPlugin for exclude any library or any code from our bundle. https://webpack.js.org/plugins/dll-plugin/
You should add external library to peerDependencies for your own library and add external library to dependencies for your application, then you should exclude external library from bundle of your own library using externals or DllPlugin and you will achieve your goal.
UPD:
If you want to include or exclude external library from your bundle depending on your application you should compile your library two times: with external library and without external library and import needed variant in your application.
Also you can use dynamic imports in your library: check exists the external library in current environment and if doesn't - import it.
But these two cases are not ok, we don't do so.
Webpack can't resolve dynamic imports and the external library anyway will still be bundled.
NPM team created peerDependencies specifically for occasions like yours. This is the industry standard.
Read these, please:
https://docs.npmjs.com/files/package.json#peerdependencies
https://webpack.js.org/guides/author-libraries/#externalize-lodash
https://nodejs.org/es/blog/npm/peer-dependencies/
I don't know how to convince you...
I'm using webpack 4 with elm and trying to bring in leaflet-map as a web-component. (This is desirable because elm has a virtual dom so mixing with standard JS tends to cause a fight over the controlled elements, it also reduces the usage of ports to talk to leaflet). However I'm struggling to configure webpack in such a fashion it recognises the import.
The package in question https://github.com/leaflet-extras/leaflet-map is a bower package and pretty much expects to be installed by bower, (otherwise it can't recognise polymer) so both the webpack-webcomponent-loader and polymer-loader packages seem to be ineffectual.
What I need to do is configure webpack to recognise a require("bower_components/leaflet_map/leaflet_map.html") or an <link import="bower_components/leaflet_map/leaflet_map.html"> as a web component and import the relevant bundle, but this is outside of my src directory.
How can I configure webpack to parse and bundle this html file into my app? And how should I be referencing it?
I have written a node module and published it as a node package. It works when I use it in backend applications (pure nodejs, no babel or transpile).
However, when I use this same npm module in the frontend (in my case a 'create-react-app') application, it breaks. Bellow is the exact error:
Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
The error is referring to my use of the spread operator (...). I would prefer not to have to rewrite the library, and would rather add some kind of transpiler to package my library. I haven't found a clear solution to this, they are all very convoluted.
I have tried using rollupjs, and https://github.com/insin/nwb. Neither sadly seem to be what I'm after.
Run my code:
You can install the library to your create react app using npm i cbs-proxy-client#0.0.3. And then add the line const cbsProxyClient = require('cbs-proxy-client') or import cbsProxyClient from 'cbs-proxy-client' to any of your scripts.
Advice would be appreciated :)
A library used for frontend is expected to package an already transpiled version of the source javascript. To do this, you might want to use rollup as a build process in your library to create a bundle file. You can use babel to transpile your code for desired browser support. Let's say the bundle file is saved in dist/bundle.js. Now you will modify the package.json to load this bundled file as the entry file using main parameter in package.json
If you are building using rollup or webpack, it is easy to miss that the bundled file should be prepared as a library. This means that importing the file using commonjs should be able to export correct variables. A typical webpack build removes such exports because it is supposed to work straight on a browser. This blog is in my bookmarks titled "js library steps" since I was creating my first js library.
Note that you do not need to put your generated file in version control. You can use npm files property in package.json to package your bundled files while ignoring them in git.
I am working on a very large javascript framework (approx 1000 javascript files). Which is currently built using Webpack. I have identified that some parts of the app are core modules, and other parts are components that use the core.
I would like to prevent developers from coupling the non-core modules and the core modules. And generally prevent inter module coupling outside of what the module exports.
When I say modules, I am not referring to a single js file which is an es6 module. Rather I am referring to a folder that contains React components, Reducers, Sagas et. all that all together constitue a logical module.
What I want is that each "module" could be a folder containing an index.js file at it's root which exports what that module wants to expose. Somehow I want to prevent other modules from reaching into that modules folder and importing "internal" files. I.e. I want to limit other modules to only importing what is exported by the root index.js.
To illustrate:
/src/framework/core
./index.js
./someInternalFile.js
/src/framework/components/dataGrid
I don't want the dataGrid module above to be able to access the internal file. Only what is exported in index.js
One approach would be to have sepearate webpack configs to build the core module into npm modules and use file: references in package.json. However this adds a build step and would mean that if developers change core they need to re-build core and re-run npm install and then restart the webpack-dev-server.
This is severely limiting as it becomes a very slow developer experience. Ideally I would like to acheive this logical separation of modules but maintain the webpack/filewatcher/hot/redeploy experience we currently enjoy.
Is there another way I can acheive this?
A way to address this issue is to break your application into multiple npm packages. To reduce the overhead of doing this you may want to consider a "mono repo" (AKA "multi-package repo".) This essentially allows you to package modules in your application into separate npm packages but keep the module hot loading and other things you want through the magic of symbolic links. Essentially you make a symbolic link in your node_modules folder to the other modules inside your repo.
I have found a number of tools that do this:
https://github.com/clux/symlink
https://github.com/lerna/lerna
https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/
https://github.com/boltpkg/bolt
I watch a lot of tutorials of angular 2, and I couldn't some questions:
1- Should I use webpack for minification and bundleling?
2- Should I minify and bundle the js of the components itselfs.
3- Should I minify and bundle the js services that the components expose e.g.
personService.js is used in person.ts?
4- What happens with the path
of the service I provide inside the component, now it will be in one
file located in another place? Should I change the path of the
service called in the component depending on if I'm in development o
production?
How are you currently handling module loading for your applications? I'm not as familiar with webpack, but SystemJS offers a builder/bundler that will do all of this for you then all you need to include in your html is the script for your bundled/built file.
I haven't used Webpack but SystemJS worked well for me. Gulp can be used to build, minify, and bundle all your code using a system.config.js to worry about the file locations of your source and dependencies.
Here is an example of Tour of Heroes where all the Typescript source is bundled into one JS file.
Angular CLI now makes all of this really easy, supporting bundling and minification (using WebPack underneath, but without any need to set it up), and Ahead-of-Time template compilation, which massively reduced the bundle size.
See: Angular 2: Reduce app size (in addition to bundling/minification)
It also sets up development and production environments, which you can import into components if you have different settings in dev vs. prod, and you can make your own custom environments and use those too.