I have another Assemble issue - I'm trying to get moment to format a date. But the helper doesn't seem to work.
I've tried both:
sudo npm install helper-moment --save-dev
&
sudo npm install handlebars-helper-moment --save-dev
The module installs okay, I'm assuming the more recent one is helper-moment as it's in the documentation.
Then I've added the helper to the Gruntfile.js:
assemble: {
options: {
layout: 'page.hbs',
layoutdir: './src/content/layouts',
partials: ['./src/content/partials/**/*.hbs', './src/content/partials/**/*.md'],
assets: 'assets',
helpers: ['helper-moment', './src/compile/helpers/**/*.js'],
data: ['package.json', './src/content/data/*.json'],
marked: {
breaks: false,
gfm: true,
langPrefix: 'language-',
pedantic: false,
sanitize: false,
silent: false,
smartLists: false,
smartypants: false,
tables: true
}
},
project: {
files: [{
cwd: './src/content/pages',
dest: './dist/www',
expand: true,
src: ['**/*.hbs']
}]
}
},
I ran Grunt and no complaints that it can't find the helper.
Then, from the template:
<div class="col s12 m12 l9">
<div class="col m12 s12 l7">
{{moment}}
I've tried in a partial and in a normal template. But it doesn't output anything, no errors anywhere, it just doesn't output.
Is there any way to debug the template build process? I'd love to be able to see some logging from the modules...
If you are using Assemble 0.6+ the handlebars-helpers project is not added by default. That means that you have a limited built-in helpers to use. I just checked and that specific helper is added in the project: https://github.com/assemble/handlebars-helpers/blob/dba009ef72173dbc8c19b346ffa0c62de71d63f9/docs/helpers/dates/helper-moment.md So, if you import the project and register the new helpers, that should make it work. I could make it work using Assemble 0.9 and the dev branch of handlebars helpers.
Related
I create a Vue 2 project by Vue-Cli 5, then I want to remove "use strick" in the complied code.
As I Know, the #babel/plugin-transform-strick-mode may be enabled via #babel/plugin-transform-modules-commonjs, and the plugin is included in #babel/preset-env under the modules option.
But the Vue-Cli used a preset #vue/babel-preset-app by a plugin #vue/cli-plugin-babel for babel.
So my question is How pass strictMode: false as an option to the transform-modules-commonjs by #vue/babel-preset-app which preset is in the #vue/cli-plugin-babel ?
module.exports = {
presets: [["#vue/cli-plugin-babel/preset", { modules: "auto" }]],
plugins: [
// I tried this way, but it throw many errors like:
/**
ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'D:\workspace\cqset_offical_website\node_modules\axios\dist\node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
*/
["#babel/plugin-transform-modules-commonjs", {}],
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
Hello I'm creating website on Nuxt and i have created a new app on Nuxt 3. But I have an probleme for the deployement, there is no 'normal' build for 'normal server' as Nuxt 2.x.
I'm using 'Lamdba' preset.
https://v3.nuxtjs.org/docs/deployment/presets/lambda
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
// Global page headers: https://go.nuxtjs.dev/config-head
nitro: {
preset: 'lambda'
},
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/png', href: '/favicon.png' }
],
script: [
{
type: 'text/javascript',
src: '/mana.js',
}
]
},
})
And on Nuxt 2.x I used this :
// nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
// Target: https://go.nuxtjs.dev/config-target
target: 'static'
}
What configuration i should to use on Nuxt 3 to have 'normal' export with an index.html file at the root for all server ?
Please use generate script like yarn generate this will create the .output/public and output will depend on ssr: boolean property in nuxt.config.ts.
if ssr is true which is by default, then there will be individual html for each dynamic route and that means dynamic routes are rendered at build time and whenever there is change in data or number of dynamic routes then you will need to run this command again.
if ssr is false then rendering will be done at client side, like SPA app and dynamic routes will have only one file that will do client side rendering and data will be fetched at client side that way site will show latest data.
Check static-hosting
Static deployment is not currently available for Nuxt 3
Besides adding target: 'static' in your nuxt.config.ts
export default defineNuxtConfig({
target: 'static' // default is 'server'
})
You also need to update your build script to be nuxi generate in your package.json (which was nuxi build originally)
{
"scripts": {
"build": "nuxi generate"
}
}
References: https://v3.nuxtjs.org/bridge/overview#static-target
I managed to deploy my nuxt3 project static to gh-pages. I had to overcome two obstacles.
yarn generate did not generate static routes until I explicitly forced it by setting
generate: {routes: ['/','all','my','other','routes']} ....
in nuxt.config.js as target:"static" did not work for me.
gh-pages need an empty .nojekyll file which seems currently not being generated by nuxt generate nor gh-pages. I entered the following into my package.json:
"deploy": "touch .output/.nojekyll && gh-pages --dotfiles -d .output"
This seems ugly but works for me.
I feel like I must be missing something really simple here, but for all my searching and going over the docs, I just cannot find a solution to this problem.
I have an inherited file structure (which at the moment cannot change) that looks like this:
- Folder 1
-Web Files Folder
- Folder 2 (root)
- .eslintrc.js
Folder 1 and 2 are siblings of one another, my main set of js, jsx, ts and tsx are set up in the Web Files Folder, and my eslint and webpack configs, package.json and entry point files are all in Folder 2.
I cannot seem to get the IDE (in this case VS Code) to effectively lint the files within the Web Files Folder. I have tried a whole host of things, the latest of which was trying to use overrides in my .eslintrc.js file to point to the relevant directory:
module.exports = {
env: {
browser: true,
es6: true,
jest: true,
jquery: true,
node: true
},
extends: [
'eslint:recommended',
'eslint-config-prettier',
'plugin:#typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
'prettier/#typescript-eslint'
],
parser: '#typescript-eslint/parser',
parserOptions: {
jsx: true,
ecmaVersion: 2020
},
plugins: ['#typescript-eslint', 'react', 'prettier', 'jsx-a11y', 'jest'],
root: true,
rules: {
'array-callback-return': 0,
'consistent-return': 0,
...
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
},
react: {
version: 'detect'
}
}
overrides: [
{
files: ['../Folder 1/Web Files Folder/*.js', '../Folder 1/Web Files Folder/*.jsx', '../Folder 1/Web Files Folder/*.ts', '../Folder 1/Web Files Folder/*.tsx']
},
]
};
This results in the error in the Eslint console: Invalid override pattern (expected relative path not containing '..')
However nothing I have tried works. I am not worried about the linting in the build, only getting the errors to appear in the IDE and resolve on save (which works perfectly if I place the files within Folder 2)
I am looking for a solution which I can use in my eslintrc.js file rather than any changes to settings in the IDE if possible. Something like
project: ['./**/*', '../Folder 1/Web Files Folder/**/*']
I have Svelte 3.x (with TS enabled) and a pretty standard Rollup config for bundling my SCSS files with this file structure:
| src
| styles.scss
| etc.
rollup.config.js:
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'myapp',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('bundle.css');
},
preprocess: autoPreprocess(),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
This works fine. Now I'm struggling getting Svelte Material UI running.
After installing postcss, rollup-plugin-postcss, rollup-plugin-sass, svelte-material-uiand svelte-preprocess-sass and reading through here and there and there I added this to the plugins array in rollup.config.js:
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules'
]
}]
]
})
When I test it in my app using a #smui/button the button (with a default styling and the default ripple effect) works, but none of my SCSS gets compiled (or get overwritten during bundling).
I'm searching the needle in the haystack and appreciate any hint.
Got it, I just missed adding emitCss: true in the Svelte plugin config. So my working rollup.config.js is this:
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'myapp',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('bundle.css');
},
emitCss: true,
preprocess: autoPreprocess()
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
This also has been answered here.
I am using Babel 7.1 together with rollup (v0.67). This is my rollup config:
{
input: 'src/svg.js',
output: {
file: 'dist/myBundle.js',
name: 'myBundle',
sourceMap: true,
format: 'iife'
},
plugins: [
resolve({browser: true}),
commonjs(),
babel({
include: 'src/**',
runtimeHelpers: true,
babelrc: false,
presets: [["#babel/preset-env", {
modules: false,
targets: {
firefox: "63"
},
useBuiltIns: "usage"
}]],
plugins: [["#babel/plugin-transform-runtime", {
corejs: false,
helpers: true,
regenerator: true,
useESModules: true
}]]
})
]
}
I want to polyfill older browsers. According to the docs, I need to include babel-polyfill in my entry point which I did. Now babel should include only the polyfills needed (because of useBuiltIns: "usage"). However, even when specifying the newest Browsers as target, I get the full load of code into my bundle (10000 lines of code).
What I tried:
I tried useBuiltIns: "entry" which fixes it for newer browsers but its not what I want (it just includes all polyfills which are potentially needed by the browser no matter if they are actually used in the code).
change the order of the rollup plugins
not include the babel-polyfill import
I have no idea why this is happening. It would be great if someone could solve this issue. Its driving me crazy!
And if someone knows as a bonus why no sourcemap is generated I dont mind getting an answer for that, too
Hey I made a repo which explores a good babel/rollup setup utilising preset-env and useBuiltIns 'usage'.
// Rollup plugins
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input : 'main.js',
output : {
file : 'app.js',
format : 'iife',
name : 'PROJECT'
},
plugins : [
resolve(),
babel({
exclude : 'node_modules/**',
presets : [[
'#babel/env', {
useBuiltIns : 'usage'
}
]],
plugins : [
'#babel/plugin-transform-runtime'
],
runtimeHelpers : true
}),
commonjs()
]
};
Take a look https://github.com/matt3224/rollup-babel7
If you can figure out how to reduce the output further submit a PR