I have a unique situation where I need to have both the source and main.js in one file and for everything to initialize within that file, so no require calls on the page. Is this possible?
If you want to include require.js with the main.js source, you can use this kind of command:
node ../../r.js -o baseUrl=. paths.requireLib=../../require name=main include=requireLib out=main-built.js
Since "require" is a reserved dependency name, you create a "requireLib" dependency and map it to the require.js file.
Once that optimization is done, you can change the script tag to reference "main-built.js" instead of "require.js", and your optimized project will only need to make one script request.
Source
Related
I have 2 files in a folder called js. I am using webpack.
js/app.js and js/login.es6.
I'm trying to include the login from my app.js:
require('login.es6') fails
require('./login.es6') works.
Any idea why?
When you write require('login.es6') node will look for a module named login.es6 in your node_modules.
When you write require('./login.es6') node understands that ./login.es6 is a relative path and will load your js/login.es6.js file.
This is needed to distinguish between modules and local files. There may be a npm module called login.es6; this way you can reference both the module and your local file in your project.
The node.js docs on require are pretty nice and gives a good overview of how modules are prioritized when loaded.
The gist is, if you don't start the string with ./, require will first look for a core module, then recursively look in the node_modules directory/-ies. So it's normal to start require calls to local files with ./.
I started a node js project written in TypeScript. I want to include import 'source-map-support/register'; in all my .ts files so I see the TS source on stack traces. Is there a way to do that without adding it to each file separately? Is there a different way to get the pre-compiled mapping on stack-traces \ debugging that will apply to the entire project?
Instead of doing it in source files, you can do it on the command line when you launch node, e.g:
node --require source-map-support/register
Or you can use a package like ts-node
P.S. Even doing it in your source files, you don't need it in every source file, just the "first" on you launch. Others required by the first (directly or indirectly) should get source-map-support automatically.
I have a webpack app that I'd like to read a json file in at runtime.
After webpack packages the application, I'd like the json file to be excluded from the bundle.js but still in the package folder. How can I do this?
I'd use copy-webpack-plugin
Pretty simply moves files from one location to another
You moved the json file into the destination package by passing it an object:
{ from: 'source', to: 'dest' }
Checkout the repo for usage examples
Use the file-loader which will let you specify an output file. Not the cleanest, since webpack really really wants to bundle everything, but it works.
require('file?name=../newfile.json!/somefolder/original.json');
The above will create newfile.json a directory above your webpack output folder. (Folder change for illustration purposes; not required.)
If you want to re-require the json*, mark it as an external dependency in the webpack config and use `require('../newfile.json').
*I'd suggest using a regular ajax call to pull the json in though. That way it's clear that the json is an external and you won't have to go through webpack's ajax system.
I'm learning how to use Webpack and Browserify so I'm still new at this. It seems to me that there should be an easy way to require entire dirs similar to ./dir/**/*.js but that doesn't seem possible. So if I understand correctly, I only have the following options:
Put all my require() statements in my entry file (app.js).
Create an index.js file in each of the directories that I want to require and
add require statements in that file.
Use the require-dir package (having npm problems with this one).
Am I missing something?
You could use require.context.
The following code creates a context with any files matching .js$ regular expression within ./dir directory recursively:
var req = require.context('./dir', true, /\.js$/);
All files within a context are bundled in webpack output.
For example, the file ./dir/foo/bar.js can be loaded like this:
var bar = req('./foo/bar.js');
You can also retrieve a list of files in a context:
req.keys();
instead of requireing code relatively, ie starting with ./ or .., i'd like to define a module "globally". For example, take the following package structure:
/src
/index.js
/a.js
/b.js
/lib
/index.js
...
When in src/a.js or src/b.js, to require lib, I would have to do require('../lib') each time. This gets annoying when you start nesting more as you would have to manually resolve ../lib or ../../lib or ../../../lib.
I want to be able to do require('lib'). Can I do this? Or should I just use globals?
Using a non relative path to require your source files is not how node's require is intended to work! Don't try to work around this restriction by placing arbitrary code file in node_modules directory or workaround by changing the NODE_PATH environment variable.
If you want to use require without a path you should extract the required code as a node module and depend on this node module. This leads to better structured code, less complex modules, encapsulated functionality, better testability and easier code reuse.
You can include package dependencies from http or git so there is no requirement to publish node modules you use in npm. Take a look at npm dependencies for more detail.
use module.exports in the index.js file . and place it inside the node_modules folder
if relative path annoy you and you want to use lib always in your application, you can use global variable like this.
var lib = require('./lib');
global.lib = lib;
you can set lib to global variable in your entry point. after then you can access just lib.
but it's pollute global scope. so you have to use carefully.
placing your module in node_modules dont require you to include a path or relative path
EDIT:
if you place a file named package.json inside the module directory, Node will try to parse that file and look for and use the main attribute as a relative path for the entry point. For instance, if your
./myModuleDir/package.json
file looks something like the following, Node will try to load the file with the path
./myModuleDir/lib/myModule.js
:
{
"name" : "myModule",
"main" : "./lib/myModule.js"
}
If that folder does not contain a package definition file named package.json, the package entry point will assume the default value of index.js, and Node will look, in this case, for a file under the path ./myModuleDir/index.js.