I'm currently brainstorming a http react component service (http://components.myCompany.com). It seems feasible, if the import directive could make an http request to grab a component. Then a consumer, likely compiling their JSX as a build step on the server side, could reference components coming from this service. E.g.
/**
* #jsx React.DOM
*/
module React from 'react';
import Timer from 'http://components.myCompany.com/Timer';
I've spent some time rooting into the react-tools nodejs module. Enough to realize that I can't quickly deduce exactly how the import statement transforms into actual component JavaScript inlined to the eventual JS file. So, asking for others who know the transformation process well enough to address the feasibility of this.
Thanks!
You can transform all your components in modules and publish them in GitHub (or in a HTTP server), and set them as dependency using URLs
On your package.json, you can set:
"dependencies": {
"Timer": "http://components.myCompany.com/Timer.tar.gz"
}
https://docs.npmjs.com/files/package.json#dependencies
Later, you can import it in React:
import Timer from 'Timer';
Related
This question might seem unusual and a little anti-pattern but at this stage I am just trying to figure out what is possible.
The situation is that I have a few components which are available from a remote import (via Webpack 5's Module Federation). The caveat is that I don't want to lazily load them.
Once imported, the components are passed into a HOC to enrich some functionality and then exported:
import ComponentFooRemote from 'testRemote/Foo'
import ComponentBarRemote from 'testRemote/Bar'
const ComponentFoo = withEnrichedFunctionality(ComponentFooRemote)
const ComponentBar = withEnrichedFunctionality(ComponentBarRemote)
export {
ComponentFoo,
ComponentBar,
}
Functionally this works as expected. The components can be imported, rendered, and no components are loaded twice.
The issue is that the code imported from the remotes are always loaded. If I don't use ComponentBar - or even if I delete ComponentBar - the code from the remote will be downloaded as long as the original import is present. This is happening when using both development and production mode in the Webpack config.
Does anyone know if I can tree-shake these imports or restructure the code to better optimise the performance? Ideally I would like to import the components from the same path.
I have a special scenario. One web application is built upon React. Another JavaScript utility is on React, but that utility is loaded by script tag. So, the application and the utility is built isolatedly. As a result, both the web application bundle file and utility bundle file have React built inside.
Now, we want to make them share one copy of React. It is preferred to export React as global variable in web application code(e.g. global.React) so that the utility can use it directly.
The code in utility is still like below. Hopefully, webpack can ignore it and import React from global.React.
import React from 'react';
import ReactDOM from 'react-dom';
The question is: how to config webpack to tell the utiltiy not to bundle React?
Tested with some non-React application:
in index.html import React from CDN, this will define global React.
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
somewhere in application doing as below, resolves to React instance:
declare var React;
console.log('React is ', React);
So if your first bundle, registers React globally, you may use it.
Just keep in mind, that it considered as bad practice to import from global like this. It beats whole concept of webpack's modularity. For instance, if your first module, upgrades to some backward incompatible version of React, your second module will break eventually as well.
For small projects, might be ok.
I've started using webpack in quite a large code base and have been using ES6's import statement to load the required dependencies for each module.
My file structure aims to be component based, with all the pieces specific to a component inside that component's folder. For example, the component file itself, and then templates, stylesheets, services, filters, etc, also specific to that component. Then we may have a generic service folder inside that module for services that are not specific to a particular component. eg:
- my-module
- component-a
- component_a.component.js
- component_a.component.spec.js
- component_a.html
- component_a.scss
- services
- some_service.service.js
main.module.js
main.run.js
main.config.js
My problem is that the main.module.js file is becoming unmaintainable, as I manually import all the required dependencies into this file and then register them into the angular world as required. eg:
import componentA from './component-a/component_a.component';
import someService from './services/some_service.service;
angular
.module('myModule', [])
.component('componentA', componentA)
.service('someService', someService);
You can imagine what this starts to look like when you have 10+ components. I've struggled to find a good solution for this problem, does anyone have any suggestions? Is there a best practice approach here?
I guess, every component/controller/service etc. can connect itself to the app in their own file.
Like you have got a file ome_service.service.js and inside you write:
myApp.service('omeService', function(){
var app = this;
// service stuff
});
So the registration is not in your main.module.js but in every file itself.
Although, you need to expose your app variable to be globally available. With a bundler like webpack this is easily handled. Gene Conroy-Jones wrote a nice post about how to make it possible via webpack here: https://medium.com/#drgenejones/using-webpack-with-legacy-angular-spas-automating-imports-using-require-context-58e0e9cc6e9c
With this approach, every new component would handle its registration on their own, and the central app would not have to carry all those imports.
I used angularjs(1.x) and new to Vue.There has DI in angular and refer a service in controller or a directive in template is easy, wherever the service or directive is. Angular will help you inject it automatically.
But I realize Vue refer a component by import(ES6) the path where the component in.If I change the component direcotry structure when refactoring(frequently), there will lost the component refer, and I should fix the path one by one. How troublesome it is.
I know there have a vue-injector like angular DI, but if it is easy to use?
Vue doesn't provide any formal dependency injection mechanism. It's completely up to you how you want to import dependencies.
Most Vue code samples do not use dependency injection at all and just use the ES6 module system via import and export.
If I change the component direcotry structure when refactoring(frequently), there will lost the component refer, and I should fix the path one by one. How troublesome it is.
You probably shouldn't be changing the directory structure frequently. Check out the Vue webpack template for an example of how to correctly structure a Vue project.
That being said, it doesn't really answer your question. Are you using webpack (or something similar)? You can configure precisely how webpack should locate modules via the resolve configuration property, so that you don't have to use relative import paths.
Another way is to register each Vue component globally so you don't need to import them at all.
Another way is to abuse ES6 modules by creating, say, a components.js module which imports each Vue component (wherever they are) and exports them all from that one module. Now you only need to import from that central module instead of hunting down the specific module location of each thing you want to import.
// components.js
import Button from 'path/to/button.vue';
import Alert from 'path/to/alert.vue';
export {
Button,
Alert,
};
// myform.js
import { Button } from 'path/to/components.js';
If you change the location of button.vue, you only need to update the import from inside the components.js file.
If you think you are going to restructure a lot, you can have one file that everyone imports and it imports all the rest, that way you only need to change in one place.
I personally prefer the import over the Dependency Injection, way easier to understand where everything is coming from.
I plan to rewrite parts of our Site using React.js (Apps have only our Stylesheets, base HTML structure in common, they use different Data-Sources).
But what I need to know, before I start:
Is it possible to reuse the React Core
import React, { Component } from 'react';
or must each "App" load/compile it's own, -> overhead per App
It's just an importing into the scope of your module, really webpack will import React only once.
If you want to make a few bundles of your app, it will be correct to exclude React (and other libraries) from bundles to prevent loading it many times. For this case webpack provides an option externals.
Webpack docs
Issue about React as externals