-
|
Hi, is there an example on your site or elsewhere showing how to build typescript files that compile to a library (I figured this much out) but can then be previewed in a index.pug page? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Hi @bkwdesign, do you mean how to include TypeScript file in Pug template so that it is compiled in native JS? I recommend using the pug-plugin, not pug-loader. In Pug template you can directly define source script (e.g. TypeScript) and source style (e.g. Sass, SCSS, Less, etc.) files: html
head
link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.ts'))
body
h1 Hello Pug!The TS file loaded via <html>
<head>
<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>
</head>
<body>
<h1>Hello Pug!</h1>
</body>
</html>Webpack config: const PugPlugin = require('pug-plugin');
module.exports = {
output: {
path: path.join(__dirname, 'dist/'),
// output filename of JS files
filename: 'assets/js/[name].[contenthash:8].js'
},
entry: {
// define your Pug files here
index: './src/views/home/index.pug', // output dist/index.html
about: './src/views/about/index.pug', // output dist/about.html
},
plugins: [
// enable rendering of Pug files defined in Webpack entry
new PugPlugin({
extractCss: {
// output filename of CSS files
filename: 'assets/css/[name].[contenthash:8].css'
},
}),
],
module: {
rules: [
{
test: /.pug$/,
loader: PugPlugin.loader, // Pug loader
},
{
test: /\.([cm]?ts|tsx)$/,
loader: 'ts-loader',
},
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader']
},
],
},
}; |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. This succinct reply helped me figure everything out (I'm a bit of a webpack novice) FWIW - At the bottom of my index.pug, I was able to add an inline script that excercised the library: Choosing to exercise my browser lib using a pug template maybe put me at cross-purposes with myself, but I liked the succinct nature of the pug syntax, allowing me to put the complexity into the typescript |
Beta Was this translation helpful? Give feedback.
-
|
in your case the Pug template should be: html
head
//- your source TS file will be compiled in JS and loaded after HTML parsing
script(src=require('./path/to/SourceFile.ts') defer)
body
h1 Hello Pug!
script.
YourLibrary.DoSpecialWork();In the Webpack config the output filename should have a hash part to avoid caching in browser after change: module.exports = {
output: {
path: path.join(__dirname, 'dist/'),
// publicPath: '/', // <= you can avoid it to use the publicPath as 'auto', all asset paths in HTML will be relative
filename: 'path/to/public/[name].[contenthash:8].js'; // <= use dynamic file naming, '[name]' will be replaced with source filename
library: 'YourLibrary',
globalObject: 'this'
},
...
} |
Beta Was this translation helpful? Give feedback.
Hi @bkwdesign,
do you mean how to include TypeScript file in Pug template so that it is compiled in native JS?
I recommend using the pug-plugin, not pug-loader.
In Pug template you can directly define source script (e.g. TypeScript) and source style (e.g. Sass, SCSS, Less, etc.) files:
html head link(href=require('./styles.scss') rel='stylesheet') script(src=require('./main.ts')) body h1 Hello Pug!The TS file loaded via
require('./main.ts')will be compiled via Webpack into JS with hashed filename: