I just started working with pug and am using it for a small single page app. I'm using templates that are compiled to javascript functions that I will use in my SPA to render HTML. Using the pug-cli, I am able to generate multiple .js files that each contain the desired template function. However, instead of compiling multiple javascript files, I'd like to merge all the functions in a simple 'template.js' file that I can then call from my client app. Here's the command I'm currently using
pug -c --name-after-file -w .\views\ -o .\public\
I've googled it, searched on Stackoverflow, and also found out that the pug API itself has the pug.compileFileClient that is meant to do this perhaps for an Express app. However, I couldn't find if this functionality is implemented in the pug-cli.
There is an npm package called puglatizer that takes a directory of pug templates and compiles it into single .js file that can be included in your html file and individual render functions can be called to produce the html.
It can be used both at the command line using a CLI or imported via require can called programmatically in your build process.
I ended up using the CLI version. Simply install the package globally using:
npm install puglatizer -g
Then run puglatizer -d path/to/templates -o /path/to/output/templates.js
This will compile all the templates in the path/to/templates folder to a templates.js file in /path/to/output.
Include the generated file in your html page via the script tag.
Then you can call the template in Javascript by invoking puglatizer.TemplateFileName({data:"myData"}) where TemplateFileName is the file name of on your pug templates in the path/to/templates directory.
Related
I'm using a library that requires binary and txt files in order to work. In its API, I need to call a set_path() method with the path to said files. The issue is these files aren't included in the lib folder when building the project with npm, so the API is not working properly. Is there a way to include this folder of non JS files in my build folder without having to copy it manually?
I am building a typescript/javascript package that will contain several JSON files. I do not want those JSON files included in the bundle that webpack outputs. I do want those files included in the output folder of the bundled javascript (copied from the node_module directory). This would be similar to including images.
I would like to create directives that explain to webpack what to do vs writing documentation in hopes that somebody reads it and does it correctly.
I know that copy-webpack-plugin will do what I need to do, but not sure how to set up this directive.
Is it even possible?
So
MyPackage has JSON files
Another developer uses my npm-package
Developer uses web pack in their project
Developers webpack bundles the javascript, excludes my JSON files from the bundle, but copies them to the output directory.
Figured it out within the package.json
Create a folder called bin (whatever) on the same level as src.
Copy the contents that need to be included in the package but not compiled or bundled into javascript, such as json files.
Update package.json add the following entry
"files": [
"bin"
],
Now when publishing, the npm package will contain the bin directory. When building within your project using webpack it will recognize this and include those files in the webpack build and deploy as part of the deployment but not in the javascript bundle.
Then from there, your javascript should reference the files similar to reading a file whether it be on the server or client sie.
I am trying to export some business logic ts files of my Angular application into an Angular library. Unfortunately, I need to use a Javascript file to connect to a proprietary service build by other people, which is only available as a pure javascript file and requires jQuery.
Without libraries (when I was using the script in my angular application), I solved this by adding these js files to the .angular.json under the "scripts" section.
The js file is huge so I could not consider the option to rewrite in typescript.
Is there some way to import and use a javascript file in my ng library?
Thanks
Karan
I have finally solved my issue.
Turns out there is no way to add a javascript file to an Angular library since ng library does not support "script" tag.
There is one other way: i.e. you can publish your library without the javascript file dependency, and the client using it will have to do 2 things:
npm install "your-library"
Now add the dependent javascript file to scripts tag in angular.json file.
Example in my case:
Run npm install wps-ng
And my Angular.json looks like this:
"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/wps-js-52-north/src/web/lib/wps-js-all.js" ]
Unlike the other libraries, just a simple npm install is not sufficient, the client will just need to add their javascript file to scripts tag.
I was trying to inject Datatables library into my meteor app, but I found that meteor doesn't always include the file injected via the <script> tag:
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
However, when I add the same file via an atmosphere package, it somehow does the job:
meteor add ksrv:datatables
Look at the source code for this package on github. It has just one file, which is exactly the same file I was trying to include earlier, but via <script> tag, and somehow, that works.
What is the difference between injecting files via <script> tags in the HTML file, and injecting files via atmosphere meteor packages?
In Meteor development there are no patterns for using a <script> tag in html. Javascript functionality is added via:
Meteor packages: meteor add packagename
npm packages: npm install packagename
Your own js code.
The meteor build system deals with adding all the above into your application. In a development environment you will see every script loaded individually into your HTML. In a production deployment all the javascript, both packages and your own code, is minified and concatenated into a single script that is loaded into your single page application.
I've used JetBrains WebStorm to create a Node.js Express App. I used npm (via File->Settings->Node.js and NPM) to install a package called validator which is used for string validation.
The package was installed under node_modules, which is fine. If I do var validator = require('validator'); in my server code, I can use the validation functions successfully.
The problem is that I would also like to use validator in client JavaScript. I can include the script like this:
<script src="/javascripts/xss-filters.min.js"></script>
But that means I have to copy xss-filters.min.js from the node_modules folder into the public javascripts folder. Then, if I ever update the package with npm, the files will be out of sync.
Is there some way to reference node_modules from my view, or to create some sort of linked file or file reference or something? I'd rather not have to maintain this manually.
you should consider using browserify, which allows you to require modules in the browser by building all the dependencies. so basically you code like you would do in server side http://browserify.org
You can done it by using another node.js module, called node-browserify
how to use node.js module system on the clientside
You can try to use bower, or yeoman.
bower - will simplify the process to include js libs.
yeoman - will help you to build projects with the the libraries that you need.