We are starting a new project using angular2, typescript and gulp. For the time being our application will consist of two subprojects: a components library (which in the future might be spun off into a separate project) and the app using the component library.
The layouts of the project is going to be something along the lines:
/project_root
/component_library
/src
/library
/components
/services
... etc
/application
/src
/app_name
/components
/services
... etc
The components in application will be using components from the library (but not the other way round)
We would like to have clean (non relative) imports in the app components when importing stuff from the library (we want to avoid ugly imports of the sort '../../../component_library/src/library ...etc' plus, what's more important, we want to be able to move the library code to a separate project without the need to update imports.
There are two possible solutions I see (don't like any of them):
Add a gulp task that would watch the component library and on every change copy the file to node_modules in /project_root
Some sort of simlink? so that we can point /project_root/node_modules to /project_root/component_library/src?
I'm afraid the first solution might not work well with IDE autocomplete in the application (first gulp would need to do the compilation/copying then the IDE would need to pick up the change from node_modules - this looks like something that can be really slow)
The second solution feels hacky - it would need to be repeated by everyone who checks out the code from repo.
What would be the best solution here?
what's more important, we want to be able to move the library code to a separate project without the need to update imports.
Ship your component_library with source and add it as a node_module dependency. Then when someone pulls your code they can add a git remote to node_modules/component_library code and work on the two projects seemlessly.
This is the approach I took with ntypescript.
Related
I'm currently creating an npm package that will consist of a series of React components that are common to some applications I am maintaining.
My intention is to be able to import this components individually as needed, not all at once. So for instance if I have the components Accordion, DropDown and Widget, but I'm only using one of them, I'd like for only its code to be required.
My understanding is that I would need to be able to do something like
import Widget from 'components/Widget';
Instead of
import {Widget} from 'components';
But I can't get the first version to work. I have not published this package, so I'm using npm link to test it on another application. I'm not even sure what to Google to solve the problem myself, so I'd also appreciate links to relevant documentation on this matter.
Thanks.
So, of course a few minutes after asking my question I resolved the issue:
First, as Yacine Filali commented on my question above, I need to have individual files in order for this to work (this part I had already figured out).
However, I was incorrectly assuming that the root of my package was going to be set to whichever directory my entry file was in. So in package.json I had set
"main": "./lib/index.js"
Incorrectly assuming that the folder structure would be read from there. After altering my configuration to build everything into the root directory it worked perfectly.
(Of course, I'm now working on a better alternative, like generating a package.json for the lib folder)
In your component:
export default Widget
In your index:
export { default as Component } from './Component'
The foundation framework for sites is great but there are lot of steps to start especially for a person who writes server side code.
We need the following:
Single SCSS file with all the code in it in the defined order with all the variables in it. I don't want to mention the include statements.
This is required so that I can run simple sass command:
sass input.scss output.css
I know this can be done simply by combining the files in any text-editor but how to resolve the point mentioned below:
I read in the document that auto-prefixers are not in SCSS files so how these will be handled in the above case.
The one solution I have is to use the compiled CSS, but I still want to have flexibility to change the variables and compile with simple sass command.
Can you please provide solution for this?
You can use the Foundation CLI to generate a project from a template that addresses all of your concerns:
http://foundation.zurb.com/sites/docs/installation.html#command-line-tool
The ZURB template is the one you will want to use since it comes with autoprefixer:
http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template
I've been trying to optimize my browserify build. Basically, I only want to include a subset of my server files in my bundle. What I really want to do is hand-pick the files that I want it to include, as I have a pretty large project. Browserify seems to really like to follow requires very eagerly and put them all in my bundle. I know I can tell it to exclude/ignore files, but it's really annoying to have to explicitly exclude almost every file in my project.
Is there some way to make browserify NOT follow requires as its default behavior and include ONLY the files that I tell it to?
Browserify just have exclude and ignore by default, to control which modules are put in the package.
To implement this functionality the best way would probably be to do a PR to browserify. If you want to do it just in your own project one way is to create the Browserify object:
var browserify = require('browserify');
create the functionality for include (just copying what they do for exclude) and then overwrite the _createDeps. Maybe just copying the whole function except for the part where it chooses what files to include.
I'd like to make the popular LESS library LessHat available to my Brunch template but I want it done in a way that I can:
Take advantage of the Bower integration so I always have the latest
Rather than having the library transpiled to CSS I want the LESS to be made available to my own custom LESS files
Is this possible? A step too far? Obviously, it's not hard to put the static LESS file into my app/stylesheets directory but this makes the linking static and I don't get the Bower integration which would be pretty slick.
Just link to the lesshat-file in your less files. This way you can use lesshat-functions and still update lesshat with bower.
For example
#import 'bower_components/lesshat/build/lesshat-prefixed.less';
if you have styles.less in your project root folder.
Consider a solution has 2 projects: ProjectA and ProjectB (both are MonoTouch apps) and ProjectBase. ProjectBase contains the whole application, but Main.cs file (with the entry point) is located in ProjectA and ProjectB (which reference ProjectBase). This way, running any of A/B projects will boot up the application from ProjectBase.
Now, I want to override something for ProjectA only (it might be XIB file, image or a .NET class). Is there any way I can setup the solution so that the code and resources, produced by ProjectBase, are merged with the ones from ProjectA/ProjectB and the latter wins?
I found (probably a quirky and kinda-undefined-behavior-driven way) of overriding XIBs: I just put a XIB into ProjectA and ProjectB, name it the same as it was named in ProjectBase and them exclude it from ProjectBase. Although MonoDevelop compiles all items, it seems that the startup project's XIBs get priority, so that I see ProjectA-specific XIBs when I launch ProjectA and ProjectB-specific XIBs when I launch ProjectB. However, I am not sure it is the way it should behave, plus, from what I can see from build log, ALL projects get built yielding resources at the end.
P.S. I'm sorry if this has been asked previously, but I was not able to find the similar question on SO.
I was once trying to do this for a bunch of apps. I would have thought build order would be ProjectBase and then ProjectA, and the content copy system would be the same... Guess this means we are wrong.
You could do a few things.
A) Build your own program to copy resources which are marked for content. Would not be very hard, just need to read the .csproj files. XML parsing is easy enough in .NET. Run this program on post build. Would just have to be careful when doing builds such as to zip or to the device as I am not sure how it handles post-build events.
B) [This is what I did instead] If I expect to also make ProjectC, ProjectD ... ProjectN I instead made a program to generate my program... (Programception).
What it does, has ProjectBase, and ProjectTempalte. You enter your new project name into this program, say, "MyNewProject" and it will create the correct folder structure, write the correct csproj files, and update SLN file. ProjectTemplate has various placeholders in .csproj files like {PLACEHOLDER} which Programception would just go through and find/replace with my project name. Image files (and in your case XIB) are then only kept within ProjectA (B..C..N) unless I do not expect to try and override them in which case they would stay in ProjectBase. This is a lot easier with a XIBless application I would assume. I never use XIB's anyway.
Hope that helps!