I faced a problem with adjusting paths for my project. The project has following structure:
prj
|-common
| |-types
| |-somefile.ts ...
|
|-server
| |-node_modules
| |-package.json ...
|
|-client
| |-node_modules
| |-package.json
| |-angular.json ...
somefile.ts
import { Observable, Subject } from 'rxjs'; !!!Cannot find module 'rxjs' or its corresponding type declarations
export class Someclass {}
As you may see i want to reuse common types between server and client side. somefile.ts is easily imported in project via relative path. But when the somefile.ts is used in some of the project, popups error for "rxjs" module.
How to properly configure package.json for projects?
If it’s not a core module (you installed it), you need to give a path to node_modules folder. Which I can see there’s two.
You need to make sure which one of them contains rxjs.
Then give the path like this:
const rxjs = require("../../server/node_modules/rxjs");
Related
I'm trying to get https://github.com/ffmpegjs/ffmpeg.js/ running in a Create React App build project.
import {createWorker} from '#ffmpeg/ffmpeg';
When I import the library the build fails with
./node_modules/#ffmpeg/ffmpeg/src/createWorker.js
Module parse failed: Unexpected token (21:4)
You may need an appropriate loader to handle this file type.
| logger,
| progress,
| ...options
| } = resolvePaths({
| ...defaultOptions,
I'm not sure how to handle this, or where the problem might be. Is this a Webpack issue?
I'm creating a React + Flux web app with a file structure that looks like this:
MyApp
|---
|---scripts
|---app.jsx
|---actions
|---components
|---HomePage.react.jsx
|---NotFoundPage.react.jsx
|--- ...etc
|---dispatcher
|---stores
1) Where do I place public assets like pictures, videos, text files or whatever..
2) Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
I usually use a dist or public folder where all asset are kept. When I release the app, the bundles are saved in the dist folder.
For example:
MyApp
|-- app
| |---app.jsx
| |---actions
| |---components
| |---HomePage.react.jsx
| |---NotFoundPage.react.jsx
| |--- ...etc
| |---dispatcher
| |---stores
|-- public
| -- js -- bunlde.js
| -- img -- images
| -- css -- app.css
Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
You can just include them in the index.html. However, recently I've been bundling the css into the javascript file so that I have one single file.
You can do that with:
webpack: https://github.com/webpack/css-loader
browserify: https://github.com/cheton/browserify-css
Let's pretend I have a project structure like so:
root/
|
-- app.js
-- config.json
-- package.json
-- lib/
|
-- config/
|
-- config.js
Further, let's pretend I want to read the root config.json from within the config.js (to override default configuration). I can do the following:
const path = require('path');
let jsonConfig = {};
try {
let moduleDir = path.dirname(process.mainModule.filename);
jsonConfig = require(`${moduleDir}/config.json`);
} catch (e) {}
My question is, should I? The documentation states:
Alternate way to retrieve require.main. The difference is that if the main module changes at runtime, require.main might still refer to the original main module in modules that were required before the change occurred. Generally it's safe to assume that the two refer to the same module.
I don't know what conditions would cause my main module to change at runtime. I assume it would be something that I would explicitly do myself, but I'm not familiar enough with the internals of the runtime to know for sure.
Edit for clarification:
I know that I could use a relative path, e.g. require('../../config.json'). But that makes it more difficult to refactor/move lib/config/config.js at a later date if that's something I end up doing. Thus my desire to require relative to the base project directory.
This config is also specific to the application. Putting it in a module under node_modules is not something I want to do. I only put npm managed dependencies within node_modules.
My question is more about potential unexpected issues that could arise from relying on process.mainModule than it is about the require function.
You could hard-code it like so
require('../../config')
Or, you could take advantage of the node_modules findup functionality in Node, and move config.json to node_modules/config/index.json
root/
|
-- app.js
-- node_modules
|
-- config
|
-- package.json
-- index.json
-- package.json
-- lib/
|
-- config/
|
-- config.js
Then just use
require('config')
I just joined a team that has an Express + Node + MongoDB project with little to no front end framework. I'm looking to build Grunt and Ember into the project. I've never done this before, usually I start from scratch with some kind of stack (whether it is Yeoman or MEAN).
Are there any good tutorials for building Grunt and Ember into an existing project/things I should watch out for? This question is probably too broad (plus it doesn't really have a correct answer...) but I thought I'd shoot it out here and close it in 10 minutes or so if that is the case.
There's very little interlope between your ember and node apps. All you really need from express is to statically serve your index.html and the resources.
The way I handled it was:
Create your ember app in a separate directory from your express.js app (so you don't mix up codebases)
Directory structure:
project
|- backend
| |- ... your node app
|- frontend
| |- [package.json]
| |- [Gruntfile.js]
| |- public
| | |- js
| | |- styles
| | |- images
| | |- [index.html]
| |- dev
| | |- vendor
| | |- controllers
| | |- styles
| | |- templates
| | |- ... (other Ember folders)
| | |- [app.js]
| | |- [vendor.js]
Your Gruntfile.js tasks should take their sources from dev and compile them into public. Must use modules IMO:
grunt-neuter to combine your js sources (recommended outputs: public/js/vendor.js and public/js/app.js)
grunt-ember-templates to compile your handlebar templates into functions, so you don't have to drag the entire handlebars.js to the client (recommended output: public/js/templates.js
All the sources you will work on should go to the dev folder. This includes:
Handlebars templates (eg. dev/templates)
Less or sass styles (dev/styles)
Vendor libraries (dev/vendor/...)
Ember controllers, views, etc.
If you're using neuter, put all the includes inside dev/app.js file, in the order you want. You can initialize your main ember app at the end. I like to separate vendor libraries into their own dev/vendor.js file. These will be compiled into their public/js/... counterparts.
Your index.html should load all the compiled scripts and styles from the public folder. If you set up your project like described here, it should end up loading 3 javascripts and 1 css.
Finally, add a static handler to your express.js app and have it serve folder ../frontend/public. Depending on the config, you might need a separate index.html handler for / route.
This is the pattern I developed before ember-cli became popular. So far, I'm pretty pleased with the results. But you might want to check out ember-cli, just in case they developed a better approach.
How should I configure multiple paths for require?
I have the following structure:
application
|-server
| |-main.js
| |-myClass.js
| |-myClass.js
| |-implementationClass.js
|-common
| |-myOtherClass.js
| |-anotherClass.js
| |-yetAnotherClass.js
|-client
| |-aClientClass.js
| |-anotherClientClass.js
| |-implementationClass.js
I want to be able to do something like this:
require('myClass');
require('myOtherClass');
How should I configure the multiple paths?
currently using require.paths gives me an error : Error: require.paths is removed.
I want to keep this structure as my application has to serve static .js files from shared and I want to avoid sharing server-side .js files.
Also the files use a require() function on the client which emulates the node.js require() and I don't want to use relative paths.
the catch is that when I call require('anotherClass') it has to work on the client and on the server. So using relative paths could work but I also have the require('implementationClass') which returns either the client implementation or the server implementation, and when they are called from the common classes this approach will fail.
Best practice to require sub-modules is by using relative paths:
require('./server/myClass');
require('./common/myOtherClass');
If you are using requirejs, you can configure aliases for client-side:
require.config({
baseUrl: "http://example.com/static/",
paths: {
"myClass": "./server/myClass",
"myOtherClass": "./common/myOtherClass"
}
});
I do recommend doing something like the above, but if you really want to be able to require them globally you can set or modify the NODE_PATH environmental variable before launching your app. require.paths was removed since it only caused problems.
global.mod = function (file){
return require (path.resolve ("../..", file));
};
var myClass = mod ("server/myClass");
var myOtherClass = mod ("common/myOtherClass");
Using require with a relative path for your own modules is a very*1/0 ugly and bad approach.