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!
Related
I am trying to add a JS script bundle file to a custom Angular Library which is using features from it. I have added the types files so the linting errors are not showing, but the Project does not get built as classes from JS Bundle are not found.
I have tried and failed importing the bundle to the public-api file.
I am thinking of trying to make the bundle a private npm package to install. But that will take lot of time and effort.
What other options do I have?
Sometimes you could have that kind of circumtances like having would like to use an JS library in your Angular project.
i have encountered something like that but i have created one directive file in the src folder like "type.d.ts" so after i declared my library in it with something like "declare module 'pdfmake/build/vfs_fonts.js';" and at last imported it in my component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"
1- Create one directive file like "type.d.ts"
2- Declare your JS library in your recent file created with something like "declare module 'pdfmake/build/pdfmake.js';"
3- Declare back the import statement in your component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"
my example is based on the rollup.js basic example: https://rollupjs.org/guide/en/#rolluprollup
the project i am working on require additional files to be included and excluded. (i know how to exclude path's using 'rollup-plugin-ignore' plugin.)
how can i tell rollup.js to add files to the import list (same as i was importing them in the source code), without changing the source files. ?
i tried to commonjs plugin
var commonjs = require('rollup-plugin-commonjs');
var include = ["D:\\...abs_path....\\components\\Auth\\FormLogin.jsx"]
commonjs( {"include": include})
but i don't see the 'FormLogin' component in the output file.
is there a more simple way, can you help me please ?
i will appreciate your help.
thank you very much.
Thats a little bit unorthodox because rollup.js uses tree-shaking to analyse your code and only include the used parts and you want something included which isnt used.
the easist way would be concatenation on the command line, like in windows cmd:
type file_from_rollup.js additional.js > bundle.js
second, you could instruct rollup to use two entry points:
rollup main.js libB.js -d ./bundle --format cjs
this will generate two bundled files in the ./bundle folder, both of them tree-shaked
If the FormLogin.jsx is referenced in the source code (seen from the main entry point) try to disable tree shaking like
rollup main.js --no-treeshake --file bundle.js --format cjs
and see if its included. Maybe rollup.js doesnt recognize it corretly: https://rollupjs.org/guide/en/#tree-shaking-doesnt-seem-to-be-working
In our company we have a library, that is divided into modules. These modules are in separate files and each of this modules have it's dependencies on other modules. Each module has a definition function, which registers it for other modules to use it later and also it can require other modules in its definition function. The require is similar to angular:
modules.require(['authentication', 'data', 'http'], module => console.log('Here is my module: ', module).
The library has a Synchronizer class, which based on this require in each module, handles importing and providing of the required modules. When a module has not yet been required, it creates a <script> tag, set it's src to the required module file and appends it to the body.
Here is the problem, because if I just import the main file of my library and try to require some module, it appends a <script> tag but the path to the file is not correct, because it is all bundled together by webpack.
Is there a way in webpack, to state, that this folder (folder with the plugin) should remain as is, so that I can then make requests to the individual files in this folder?
I have tried using "import" statement, "require" and also I tried to change the library into npm package, but I am not really allowed to change the library, because it has been tested in this format. So keeping the library as is, would be the best.
For example if I put this library into:
./static/js/mylibrary
then our library can produce for modules.require(['data'], onSuccess) a <script> tag with src like:
./static/js/mylibrary/data.js
Can I setup webpack so that the file stays there? In development? In production?
I am using a project created by vue-cli
As I mentioned in the comment simply putting it to the "public" directory in webpack did the trick for both, development and production. Don't know why I didn't try this before.
I have a two-year-old AngularJs 1.x project, which is built with Gulp for development and Grunt for production (don't ask me why; I don't know either).
The build process is basically:
Compile all scss files into one css file
Merge all JS files into one JS file. We are not using any import mechanism. Each file is basically one of AngularJs' controller, component, service or filter. Something like this:
angular.module("myApp").controller("myCtrl", function() {//...});
Merge all html templates into one JS file. Each template is hardcoded with $templateCache.
Moving assets like images and fonts into the build folder.
Moving third-party libraries into the build folder.
Now I want to switch to webpack for this project. I want to incrementally modernize this project, but the first step would be just building it with webpack with a similar process like the above. I would like to keep the code base as much the same as possible. I don't want to add import for all the JS files yet. There are too many. I would also like to add a babel-loader.
I have some basic concepts about webpack, but never really customized the configuration myself.
Would anyone please give me some pointers? Like which loaders/plugins would I need, etc.? Thanks!
My process to do such a transition was gradual, I had a similar Grunt configuration.
These are my notes & steps in-order to transition to Webpack stack.
The longest step was to refactor the code so it will use ES6 imports/exports (yeah, I know you have said that it is not a phase that you wanna make, but it is important to avoid hacks).
At the end each file looks like that:
//my-component.js
class MyComponentController { ... }
export const MyComponent = {
bindings: {...},
controller: MyComponentController,
template: `...`
}
//main.js
import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);
In order not going over all the files and change them, we renamed all js files and added a suffix of .not_module.js.
Those files were the old untouched files.
We added grunt-webpack as a step to the old build system (based on Grunt).
It processed via Webpack all the new files (those that are without .not_module.js suffix).
That step produced only one bundle that contains all the files there were converted already, that file we have added to concat step.
One by one, each converted file gradually moved from being processed by Grunt tasks to be processed by Webpack.
You can take as a reference that webpack.config.
Good luck.
Noob here (also couldn't find proper documentation).
So I was trying to implement gulp.js with jekyll. In order to do so, I wanted to concat javascript files into a single bundle. Now I can do that by hand, hard-coding every dependency and piping it through gulp-concat. But, I found out webpack does this thing pretty neatly. (PS: I was following https://ixkaito.github.io/frasco/). So now I installed webpack via npm, and tried to run my site, but it threw uncaught expression error. My directory tree is like this:
-js
----vendor
-------jquery.js
-------anime.js
----other
-------some-other-js-files.js
...
-main.js
Now I want to make bundle.js files using this, so that webpack can automatically detect the correct dependency and import it. Am I supposed to require('jquery') and do the same for all dependency in main.js?
My webpack config is
entry: [
"main.js",
]
Thanks