How to configure webpack to only bundle files within a directory? - javascript

I've a folder structure for my project that looks roughly like this:
myproject
|-- some-folder
| `-- src
| `-- index.tsx
|-- src
| |-- components
| | `-- files.tsx
| `-- index.tsx
`-- webpack.config.js
When I run webpack, it tries to bundle the index.tsx file in both src and some-folder.
This would then throw an error because the index.tsx file in some-folder has certain dependencies webpack cannot resolve since is not meant to be bundled together.
This is how I've configured my webpack's entry point:
var config = {
context: __dirname + '/src',
entry: {
app: './index.tsx'
}
}
How can I configure webpack to only look for files within the src folder and not else where unless I define another different full path in the entry point?

Seeing that this is pretty old, it might be solved already, but was it something to do with adding an "exclude" statement to make sure the "/some-folder" was omitted?

Related

Testing angular components outside of main project folder: module not found raw-loader

So I want to run ng test and include tests in a folder next to the projectfolder.
mainproject/
|-- src/
| |-- app/
| | |-- home/
| | | |-- home.component.spec.ts
| | |-- app-main.component.spec.ts
| |-- test.ts
| |-- tsconfig.spec.json
|-- node_modules/
|-- angular.json
|-- package.json
|-- tsconfig.json
components/
|-- common/
|-- control-bar/
|-- control-bar.component.ts
|-- control-bar.component.spec.ts
When I run ng test without including the other tests in the components folder it works as intended, but when I try to include the other components ng test fails with the following error.
ERROR in ../components/common/control-bar/control-bar.component.ts
Module not found: Error: Can't resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
Parsed request is a module
No description file found
resolve as module
absolutepath\repos\components\common\control-bar\node_modules doesn't exist or is not a directory
absolutepath\repos\components\common\node_modules doesn't exist or is not a directory
absolutepath\repos\components\node_modules doesn't exist or is not a directory
absolutepath\repos\node_modules doesn't exist or is not a directory
absolutepath\node_modules doesn't exist or is not a directory
C:\Users\user\Desktop\node_modules doesn't exist or is not a directory
C:\Users\user\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules
using description file: absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules)
using description file: C:\Users\user\Desktop\folder absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules/raw-loader)
no extension
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
.js
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js doesn't exist
.json
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json doesn't exist
as directory
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\package.json]
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\node_modules]
[C:\Users\user\Desktop\folder\repos\components\common\node_modules]
[C:\Users\user\Desktop\folder\repos\components\node_modules]
[C:\Users\user\Desktop\folder\repos\node_modules]
[C:\Users\user\Desktop\folder\node_modules]
[C:\Users\user\Desktop\node_modules]
[C:\Users\user\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json]
# ../components/common/control-bar/control-bar.component.ts 13:34-85
# ../components/common/control-bar/control-bar.component.spec.ts
# ./src/test.ts
So raw-loader seems to be missing or it can't find it. To be clear there is only 1 node_modules in this setup and it's inside the mainproject folder.
I'm having the exact same issue and I've abandoned the search for a proper solution. For now I'm making it work by making sure the dependencies of the library are installed separately (so having a second node_modules folder in the library).
Since there is nothing to be found on the subject and the official angular documentation for creating libraries mentions that it is required for libraries to be built:
Build the library. You cannot use a library before it is built.
I'm assuming dynamically linking to unbuilt libraries without its own node_modules is simply unsupported (even though it works fine as long as there are no component classes imported in the library).

Issue with consign and express paths

I'm currently working on some university coursework, which is essentially an API written in express. We're allowed to use other packages as long as we follow the spec.
I'm trying to use consign for autoloading my models, middleware and routes. The problem I'm facing is the folder structure that we have to follow.
coursework
|-- artifact
| |-- server
| | |-- api
| | | |-- models
| | | | `-- stories.js
| | | |-- middleware
| | | | `-- stories.js
| | | `-- routers
| | | `-- stories.js
| | |-- node_modules
| | |-- package.json
| | |-- package-lock.json
| | `-- server.js
| `-- utilities
|-- node_modules
|-- webpages
|-- package.json
|-- package-lock.json
`-- test.js
Inside of artifact is where all of our code goes, nothing else is touched. The root directory that contains test.js is where we will be assessed. From the root we run npm test (QUnit) and then it lists which tests have passed and which have failed.
The problem is we have to start our server from the root directory by calling node artifact/server which is fine because it calls artifact/server/server.js.
Inside of artifact/server/server.js I have the following code to initialise consign:
consign({ cwd: './artifact/server/api' })
.include('models')
.then('middleware')
.then('routers')
.into(app);
When I run node artifact/server from the root directory I get the following error:
What's frustrating is if I change consign's cwd property to api and then start the server inside of artifact/server by calling node server.js it works perfectly fine.
The problem is I need to be able to start the server from the root directory. I'm completely stuck as I do not know how I can modify consign to work from the root directory.
Any ideas?
I managed to find a solution to my problem and felt that I should post an answer to help others.
Essentially, as shown above I was using a relative path like so:
consign({ cwd: './artifact/server/api' })
.include('models')
.then('middleware')
.then('routers')
.into(app);
which when called from the root directory resulted in consign not working. This can be fixed by making use of path
I added this at the top of my server.js file:
const path = require('path');
and then changed my consign init to:
consign({ cwd: path.join(__dirname, 'api') })
.include('models')
.then('middleware')
.then('routers')
.into(app);
This then fixed my issue!
I was running into the same issue and getting this error
! Entity not found
...but then read Node's path documentation and tried the following:
consign({
cwd: path.dirname(__dirname)
})
Seems to be a solution if you need the working directory cwd: to be root './'

Electron - How to add external files?

I have an Electron app. I try to make the app open an .exe file. I created a directory in the root folder named lib and placed the .exe file there. In development, I have no problem opening the file by using __dirname + '/lib/file.exe, but when I package the app (using yarn dist), it does not open the exe file and there is no lib folder anymore on the dist folder.
I tried writing to console the default location using console.log(__dirname) and it outputs \dist\win-unpacked\resources\app.asa (which is a file).
How can I add an external file that can be accessed when the app is packaged?
Managed to solve it by using extraResources. Should be declared under build in your package.json file.
For example:
Create a new folder named extraResources adjacent to pacakge.json
Add the following code to your package.json file:
"build": {
"extraResources": ["./extraResources/**"]
}
Then, you can access the files inside this folder by using __dirname + '/../extraResources/' from your main app.
Add the following code to package.json:
"build": {
"extraResources": [
{
"from": "./src/extraResources/",
"to": "extraResources",
"filter": [
"**/*"
]
}
]
}
Then, you can access the files using
const configFile = path.join(path.dirname(__dirname), 'extraResources','config.json');
I use the following folders structure which allows me to run the app any way.
from project folder:
node_modules\.bin\electron.cmd src\main\index.js
from unpacked source
dist\win-unpacked\app.exe check-for-update
from installed folder
C:\Users\user\AppData\Local\Programs\app\app.exe
+-- dist
| +-- win-unpacked
| +-- resources
| +-- extraResources
| config.json
+-- node_modules
+-- src
| +-- extraResources
| config.json
| someFile.js
| +-- main
| index.js
| +-- render
| index.js
there I found a new solution,
using electron-packager on Windows do not add the files into the resources folder at the end of the process.
So I added this command into the package.json
"build-win": "electron-packager . --platform=win32 --asar --prune --arch=ia32 --extra-resource=./extraResources/documents/QuickStartGuideWN-H1.pdf --extra-resource=./extraResources/MAC_drivers/MacOS10.14/ --icon=assets/alfa_a.ico --out ./dist --overwrite",
And now the files are insied the resource fodlder just add
--extra-resource=./extraResources/file

How do we separate the built files from the source while also being able to test and see Express views from the source?

I'm staring to build a project in node. The directory structure I've decided to use is to have all my source files under ./src, and the files I'll eventually upload to the server under ./dist. The (not quite complete) directory structure is shown below. The ./dist structure will eventually mirror ./src once it's built.
|-- LICENSE
|-- Procfile
|-- dist
| `-- server.js
|-- gulpfile.js
|-- package.json
|-- scripts
|-- src
| |-- assets
| | |-- fonts
| | `-- images
| |-- common
| | |-- directives
| | |-- resources
| | `-- services
| | `-- authentication
| |-- index.jade
| |-- less
| |-- server
| `-- server.js
|-- test
| `-- server.spec.js
`-- vendor
My question is, when I'm setting the view folders for ./src/server.js, should I set them to the files under ./dist, or ./src? I see reasons for both, but it doesn't seem like anybody would do that.
serving from ./dist makes the most sense for production, obviously, since this will be the only folder shipped to the production server. Right?
serving from ./src will allow me to test the server and its pages before building/minifying/etc. the entire thing into ./dist.
How do people separate the built files from the source while also being able to test and see Express views from the source? Is it as simple as setting views under the conditional process.env.NODE_ENV === "production"? Is there a more elegant solution-- to either my server app code or directory structure?
for the view directory, I advice to put it in the src folder and just copy them with a gulp task

Understanding r.js options w/grunt & backbone and relative paths

I'm trying to figure out how to use r.js. I keep getting errors thrown such a module path does not exist, or files getting dumped where they shouldn't be.
I've got a single page application that is integrated with wordpress. I've adopted this backbone boilerplate for my general structure, although I've set things up quite different. My file structure is shown below.
.Theme Folder
├── _assets
| ├── _application
| | ├── css
| | ├── fonts
| | ├── img
| | ├── _js
| | | ├── main.js //this is my require.js config file
| | | ├── _app //here's where the boilerplate structure comes into play
| | | ├── collections
| | | ├── models
| | | ├── routers
| | | ├── templates
| | | ├── views
| | | ├── libs
| | | ├── utilities
| | ├── scss
| | ├── video
| └── build //Concatenated application directory mirror
| └── gruntfile.js
| └── bower.json
| └── package.json
To save the heartache of deciphering my gigantic grunt file. Basically I originally set it up so that everything gets conatenated, uglified, and compiled into the build folder. I created a simple task for r.js to just test things out. I get an error saying my lodash library cannot be found (first path in my main.js file). It thinks lodash is in assets/lodash.js it's ignoring my baseUrl property in my main.js (require.js configuration) it's actual location is assets/application/js/libs/lodash.js. My requirejs task is below:
requirejs: {
compile: {
options: {
baseUrl: "./",
mainConfigFile: "application/js/main.js",
name: "./application/js/main",
out: "./build/js/optimized.js"
}
}
}
I'm having the hardest time figuring out what exactly rjs is doing. When I expect it to work it's not looking for the files in the right directory. When I configure it to find the right files it copies my entire assets folder and dumps it into my build folder... Which has caused a lot of confusion as to what all r.js is doing and what it wants me to input for it's options.
This is the error I am currently getting:
>> Error: ENOENT, no such file or directory
>> 'path-to-theme-folder-here/assets/libs/lodash.js'
>> In module tree:
>> application/js/main.min
It seems to me with the description you give, this should work:
requirejs: {
compile: {
options: {
baseUrl: "application/js/",
mainConfigFile: "application/js/main.js",
name: "main",
out: "build/js/optimized.js"
}
}
}

Categories

Resources