I'm looking into migrating a large, homegrown build script for one of our projects to webpack.
One feature it has is it traverses a /views directory and copies the contents of the html files into a main index.html file. This allows us to easily use KnockoutJS's templating feature without putting everything in one file ourselves. Something like this:
for relative_path, full_path in walk(os.path.join(base, "views")):
with open(full_path) as f:
index.append("""<script type="text/html" id="{0}">""".format(relative_path))
index.extend(f)
index.append("</script>")
Ideally, I'd like to be able to do something like require('./views') and have it embed each .html file as <script type="text/html" id="views/foo">...</script>, injecting the text into the script tag and setting the id to the filepath. We have almost 100 different templates, so I'd like to avoid require()ing them individually.
Can I configure html-loader or html-webpack-plugin to do this? I'm wondering if I'll have to write my own webpack plugin or if there's a way I can configure an existing plugin to do what I want.
Thanks!
I think you can accomplish this using require.context and the html loader.
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){
// code to add each template to document.body
}
Related
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
I am using VS 2015 + ASP.net vnext + Angular 2 + Typescript + gulp.js. I have automated my scripts/**/*.ts files moving to the wwwroot/app folder. Now I want to do the same for my libraries like Angular 2. I want that a gulp process injects
angular.js inside index.html inside the <environment names="Development"> node;
angular.min.js inside index.html inside the <environment names="Production"> node.
Of course I want that this to happen for all my libs automatically, without having knowledge about a library:
<any>.min.js (production)
<any>.js (development)
The minification of any.js can be done by me.
Actually I would just have to regard all dependencies in package.json... but then I am lost.
Can my idea be done or does there maybe already exist a tool? Or should the workflow broken into more manual steps like I have to copy/paste a certain library?
Or is it possible to take the dependencies name and concat it with .js then search this file under the node_modules folder... (kind of hacky and not safe...)
UPDATE
Rephrase/Refine my question:
How can I automatically add my npm dependencies (not devDependencies) to the environment "Development" node when triggering a certain event like build/clear/etc...
There is a little tag helper for this, called asp-src-include.
Imagine the case where you have a handful of *.js files you want to include:
<script src="/app/app.js"></script>
<script src="/app/controller/controllerA.js"></script>
<script src="/app/controller/controllerB.js"></script>
<script src="/app/service/userservice.js"></script>
etc. You can include all of these with a single `ยด tag.
<script asp-src-include="~/app/**/*.js"></script>
So for Production/Development deployment your Razor markup may look like
<environment names="Development">
<script asp-src-include="~/app/**/*.js"></script>
</environment>
<environment names="Staging,Production">
<script asp-src-include="~/app/**/*.min.js"></script>
</environment>
For this you need the #addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" (starting with RC1 or RC2 it's ' #addTagHelper *, Microsoft.AspNet.Mvc.TagHelpers' - without the double-quotes ) declaration in your *.cshtml files or inside your _Layout.cshtml.
edit
There is an module called gulp-npm-files that does something similar, it copies all *.js files into the target folders. You can see it's source on GitHub in case you want write your own module to extend the functionality.
But that may not be exactly what you want, as the folders often contain multiple files, for example angular2 (AngularJS 2.0) contains dozen of files (*.js and *.ts), but you're mostly only interested in the compiled/minified ones, found in angular2/bundles/* like angular2.js, angular2.min.js or angular.dev.js.
The package.json of the particular dependency provides no information on where to find this compiled files. So I guess, there's no way to automate this unless you want to copy all of the files to wwwroot which makes no sense in my eyes, especially if you want to use asp-src-include, as it makes no difference on what it includes, so you want to minimize the number of *.js files in your wwwroot folder.
I guess the best you can do is to manually copy the dependencies via gulp task and then use asp-src-include to automatically include them into your razor generated html files.
So your problem is that you want to inject the scripts automatically into your HTML, right? You can use the Wiredep module for that.
And for copying the assets to an other folder, there are many modules to copy or link files from one folder to another. Gulp-copy is the first one i could find.
I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html
It depends.
If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.
If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
});
app.import('bower_components/ladda/dist/ladda-themeless.min.css');
app.import('bower_components/ladda/dist/spin.min.js');
app.import('bower_components/ladda/dist/ladda.min.js');
return app.toTree();
};
This will then be merged into your vendor.css and vendor.js which are linked to from index.html.
Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.
brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.