I'm trying to convert a requirejs project to use webpack. In the Index page, before the webpacked bundle.js script is called, a requirejs module is defined inline that uses some Razor directives to set some js variables from the c# controller. This requirejs module is then referenced a few places in other js files.
When I try webpacking my js files, obviously webpack can't find this module, and I can't separate it into its own js file because it contains Razor statements.
I can't think of a way around this, but perhaps there is? Help, please...
Related
A javascript file containing import statements referencing Firebase browser modules embedded in an HTML file needs to be declared as type="module". But after conversion to ES6 modules, this qualifier seems to be optional.
Is a "bundled" javascript file no longer regarded as a module? It certainly still behaves like a module, at least in the sense that a Javascript function in your bundled file remains unavailable to the DOM (eg, an "onclick" reference to a bundled function won't work).
Examples of tags in Google documents seem to confirm the pattern - scripts using browser modules should be declared type="module", bundled scripts should be left unqualified. But what exactly is going on here?
Advice would be much appreciated
Yes, before you build an app, i.e. before you do npm run build, remove type="module" from all the script tags.
What happens under the hood is that the bundler puts all the code from your .js files into one big file.
You can find that file inside you dist folder.
If you're using Webpack or Parcel or any other bundler, they convert JS from ES6+ to ES5, and ES5 does not support import statements, that is why it puts all the js code into one big file.
I'm pretty new to Typescript. I'm about to work on a Js project and I want to use Typescript because provides modularity features which helps me to maintain and develop the project more easily.
I put each class inside one single ts file and imported all of them in the main.ts file. I used --outFile flag to compile all of them into a single js file
but the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js! is there any way to do it without importing any other js files to the HTML document? if not, please suggest me an alternative way!
because I want to just compile all the stuff into one file like jquery.js file.
I used --outFile
Use outFile only if your code doesn't depend on any other library as it is straight concatenation.
the problem is I want to finally compile them into a single js file and easily attach it to HTML file without any other preliminaries such as importing require.js
This will only happen if you used a module aka import/export statement in your code. These require a module loader. outFile should not be used if you are using modules.
Thoughts
Personally I recommend commonjs with webpack
This is what I was looking for
https://www.typescriptlang.org/docs/handbook/gulp.html
I am refactoring a extremely large javascript file into multiple files with es6 modules / webpack. To start with, I am moving a single function out of giantFile.js into singleFunction.js, and then importing this new function file into index.js, which is the entry point for webpack to create bundle.js, which is then included in my template.html file as a script tag. In my template file, I also include giantFile.js as a script tag, which calls the function in singleFunction.js.
Is it simply a case of getting the script's imported in the correct order, or am i mistaken in my understanding of how giantFile.js can access the newly created modules.
Currently, within the console, when I type singleFunction(), i receive 'is not defined' error message', and so it would be good to check my understanding is correct of how I can use modules before further debugging. If anyone can point me towards some good resources on refactoring front end javascript and best practives that would be much appreciated too. Many thanks.
in singleFunction.js
`export default function singleFunction() {...}`
in index.js
import singleFunction from './components/singleFunction'
in template.html
<script src="/frontendHotness/components/singleFunction.js"></script>
<script src="/unstructuredMess/js/giantFile.js"></script>
The webpack compiled version of your giantFile.js should still be your application's entry point and the only file that is embedded in your HTML file using the <script> tag.
During your refactoring, you should gradually move well-encapsulated bits of functionality into separate files, or modules. Those modules export the functionality, to be used by dependent modules.
Your parent module, in this case giantFile.js can now import the different modules it depends on. These dependencies will be resolved by webpack, which moves your parent module together with all its dependencies into one JavaScript file that you can load from your HTML page.
Note that this dependency tree can be arbitrarily deep - your submodules can itself depend on other modules. You should however ensure that your modules encapsulate the functionality to do one particular job while being loosely coupled with other modules. Also avoid circular dependencies.
The Answer is below the question:
Maybe I don't understand the whole RequireJS thing fully,
but here is my problem:
I got a set of files like that:
sub
sub1.js
sub2.js
main.js
In all of the files in sub, i use the define() function to define modules. In the main.js, i use the require() function to load all modules. All of this works.
Now when i run the optimizer (r.js) on the main.js, it just takes the content of all files and puts it into one file. Yes, i can then use this optimized file to do the same as what i could do with the multiple files.
All good, no error.
Now my question: In that optimized file, it still uses RequireJS. Can i optimize it to the point, where it doesn't use RequireJS, where it's just the functions put together?
Answer
You can only include RequireJS into your optimized file by setting the include option to "requireLib".
Are you trying to load the file in the script tag w/o using data-main + require.js? OR, are you trying to render the file so that RequireJS is no longer used at all? I suspect it's the latter, which is not possible. If the former, that is achieved by bundling Require in via a build file option: http://youtu.be/m6VNhqKDM4E?t=12m44s
No you cant. The point of the r.js is to compile all your dependencies situated in multiple files into one. So even after compiling the modules are still AMD modules, but now without the need to load them separately. And the modules still need an AMD loader to get work. The only thing you can do after compiling is to use a more lightweight loader loader like Almond
I am using tsc.exe manually, is there a way for me to basically pass it a load of Typescript files under a root namespace and just compile it to a single namespace encapsulated js file?
I am thinking like how you have a .net dll which contains the root namespace and all children.
I managed to find some links after posting this:
TypeScript compiling as a single JS file
http://www.codebelt.com/typescript/typescript-compiler-commands/
Both of which helpped me, the actual answer is:
tsc.exe --out some_file.js some_ts_file.ts some_other_ts_file.ts