Webpack path resolution - javascript

I have a SFCC project with multiple sites in one repository. Here is a brief overview of the structure of the codebase:
core
cartridge
js
something
dialog.js
modal.js
app.js
shirt.js
site_1
cartridge
js
page
file1.js
app1.js
site_2
cartridge
js
page
file2.js
app2.js
site_3
cartridge
js
page
file3.js
app3.js
build
site1.js
site2.js
site3.js
My webpack entry points are the site1, site2, and site3 js files. In each of those files, I am importing the respective app.js file. Each of these app.js files has their own files that they require for that particular site. When I run webpack I get the Module not found error.
In the app.js files, I am requiring outside dependencies like so:
require('./dialog.js')
The error for this example would be something like this:
ERROR in ../[site]/cartridge/js/app.js
Module not found: Error: Can't resolve './dialog' in '/path/to/repository/[site]/cartridge/js'
Any idea how I can concatenate the correct path to to these files?

Create an alias to core directory. Then require/import using [alias]/js/something/dialog.js

Related

Using external js file in vue file with Webpack

I am working on a project which is used typescript, vue and webpack together. I have created some components and i can use them by importing. However i have different js files in another root folder like site.js, ruler.js, color.js, speech.js, drware.js and etc. Schema is like below
+|dist
----build.js
+|src
----index.ts
+|main
----Header.vue
----Footer.vue
----Body.vue
+|lib
----site.js
----ruler.js
----drawer.js
----color.js
webpack config is getting index.ts from src folder which is shown above. When I don't use some functions (like jquery plugins or some special funciton) everything is fine. But when i use a functon from site.js webpack fives error like cannot resolve "ruler" from site.js
I have tried to concat by giving second entry in webpack.config.js but it didn' solve my problem. I wonder how to to resolve external js files in vue or ts files using webpack. I alson tried
require(""../src/site.js)
but it didn't work too.
Edit : If i concat the js files manually and give it as script source on html it works without problem but i cannot merge all files like or i don't want to use "gulp" to concat them
Have you tried including a script-loader into your webpack's configuration?
Webpack is a bundler, not a script loader itself. I would recommend you to follow webpack's official instructions to add a script loader.
Good luck!

webpack - require script in index.js file without parsing

I'm using webpack with babel-loader to organize my webdriverio scripts. Since I'm writing automated web-site testing scripts, I don't have a production environment per-se, so the point of using webpack is really just to organize my code chunks better and transpile my es6 code to es5 since node does not allow all es6 features.
I have a script: "../../../external/file-search.js" which I am requiring at the top of an index.js file. The point of file-search.js is to search through the directory and require all files in that directory using fs. This is what my index.js file looks like (located in ~/tasks/):
var fileSearch = require("../../../external/file-search.js");
var d = __dirname;
fileSearch(d);
when I run "webpack tasks test.js" webpack compiles file-search.js into my "test.js" file rather than requiring file-search.js and allowing me to use it's exported method in my index.js file. I will use file-search.js in all my index.js files so it's important to include it as a module. I've tried using externals but as far as I know, externals simply exclude certain modules from being compile/transpiled and try to bundle them into the final script. I actually want to require that script and use it right away in my index.js file. How can I require file-search.js and use it right away as part of my index.js file?

Module not found in Electron / Atom Shell

I'm new to npm, node and Electron.
My Folder looks like:
-package.json
-index.html
-main.js
-js/myStuff.js
-node_modules
In the file myStuff.jsI have var chokidar = require('chokidar'); but it shows then module not found error.
In the index.html I included the myFile.js like normaly in a script tag.
I did read how node is looking for modules. But that doesn't help cause then it should find it, cause it's looks in all parent dirs for the node_modules folder and then in there for a chokidar folder and in that for the index.js file, which is there.
What am I doing wrong?
It works now, but i have no idea why..
In contrast to other node apps, electron doesn't automatically set your NODE_PATH to global (i.e. /usr/bin) or local (e.g. node_modules) folders. So you need to export it manually:
NODE_PATH=/path/to/node_modules electron my_app

Submodules in Browserify

/foo
/bar.js
/foobar.js
/index.js
In node.js if you a require a directory (require('foo')), it would look into that directory and find an index.js file and return whatever exports I have in that file, so I can just bundle up the contents of the directory in an index.js file. Therefore, I dont have to require bar and foobar separately if index.js already includes them.
However this approach doesn't work with browserify. It seems like only thing browserify understands is relative paths.
/star
/star.js
/starfoo.js
/index.js
/foo
/bar.js
/foobar.js
/index.js
In other words I want to separate my project into submodules, call require on a directory as if I am calling require on a dependency. For example in the star.js file I want to be able to require('foo') and get the exports of bar.js and foobar.js (as long as /foo/index.js is importing bar.js and foobar.js)
edit:
Looking at the react source code, i think what i am describing is possible
https://github.com/facebook/react/blob/master/src/isomorphic/ReactIsomorphic.js
In this file they call require on React-Children in line 14.
var ReactChildren = require('ReactChildren');
However react children is couple directories deeper.
https://github.com/facebook/react/blob/master/src/isomorphic/children/ReactChildren.js
Where is this mapping defined?
There isn't a way to specify a base directory because that's not how node modules work. If you want non-relative paths, use the node_modules directory. If you want require('foo') to work from any directory, just make a symlink from your project root:
ln -s foo node_modules/foo

How to load a task using loadNpmTask in gruntfile if module is in different directory

Trying to load module: grunt.loadNpmTasks('grunt-express-server'); from an external directory.
Get an error: task .... does not exist. Have you loaded it?
Directory structure:
client/
node_modules
gruntfile
dev_server/
node_modules/
grunt-express-server
So my question is: how do you run a grunt-task using a node-module which is stored in a external directory?
You will need to use grunt.task.loadtasks pointing it to the task directory which you want to load the tasks.
In your case:
grunt.loadTasks('../dev_server/node_modules/grunt-express-server/tasks');
If you check grunt's master on github, at line 325 of task.js it requires the taskfile (.../tasks/express.js) located in the filepath you passed as parameter.
// Load taskfile.
fn = require(path.resolve(filepath))
Edit
If you're wondering if you can relocate the grunt's path to node_modules, check out this question

Categories