Current webpack bundling project folder structure (win10):
root_folder\
|--node_modules
|--src
|--index.js
|--template.html
|--package.json
|--webpack.config.js
Contents of index.js:
console.log("Hello webpack");
Contents of template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Contents of package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"dependencies": {},
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Contents of webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
template: path.resolve(__dirname, './src/template.html'), // template file
filename: 'index.html', // output file
}),
]
};
How to make this folder completely portable, i.e. when running npx webpack or npm run build this always can run well, no matter if working with C:\root_folder\ or with C:\very\longpath\root_folder.
Have successfully ran npx webpack for this example in C:\root_folder\ and then i copied ** root_folder ** like it is into D:\testing\root_folder\ and when running npx webpack from D:\testing\root_folder\ it worked, which obviously shows it is portable.
Summary: It is helpful to store root folders of webpack bundling projects if they belong to other projects in their own project subfolder, so it is useful to be able to have root_folder sometimes in nested folders.
Question: Is there available a way to resolve all root_folder/ scripts with local paths in windows with simple npm scripts or even npx command, so it will not return error for long paths?
Current Answer: Well found which works is copying the nested root_folder to a temporary C:\temp\root_folder and from there do all the npm webpack processing and also module bundling.
So answer which worked here was to mount the project directory and from there run the build.
All of what is necessary is to have the following npm scripts (in package.json):
"scripts": {
"test": "ECHO \"Error: no test specified\" && EXIT 1",
"build": "(IF EXIST \"%CD%/dist\" RMDIR dist /S /Q) && webpack",
"nestingcompliance:build": "SUBST Z: \"%CD%\" && PUSHD Z: && npm run build && POPD && SUBST Z: /D"
}
And then run in cmd line:
npm run nestingcompliance:build
Related
Every time that I add a class, to see the changes I have to stop running nuxt, reload the vs code window and run "npm run dev" again. Then I can see the changes
My tailwind.config.js :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}'
],
theme: {
extend: {}
},
plugins: [require('daisyui')]
}
I place the tailwind.css file inside assets/css/tailwind.css
And import it inside my layout component: layouts/default.vue
My nuxt.config.ts:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/tailwind.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
}
}
})
My package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "3.0.0-rc.11",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"daisyui": "^2.31.0",
"firebase": "^9.10.0"
}
}
I think Nuxt.js is a framework that makes server-side rendering like NextJs for React.
In that way, all of the data and HTMLis rendered by the Nuxt server, which sends a generated "html/css" package to the client with only the css class that you used in your code.
So I would say it's normal to rebuild everytime you want to see your change for the css class you just add.
If you want to see directly the changes without rebuilding each time (like in the browser dev tool in order to write your css class easily), I would advise you to link in the HTML root file (index.html), the complete tailwind css sheet.
You can find a version on the tailwind doc page like this one : https://tailwindcss.com/_next/static/css/b606771d290f9908.css
Then you can remove the link at the end of your dev work.
I'm working with preact for the first time and am trying to render JSX code in express server.
I understand that express doesn't understand JSX syntax and requires babel.
I've installed babel and transform-react-jsx but I still get the undefined error.
Error:
/Users/akarpov/Downloads/test_preact_node/app.js:9
<div class="fox">
^
SyntaxError: Unexpected token <
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": ["transform-react-jsx"]
}
package.json
{
"name": "test_preact_node",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"#babel/core": "^7.17.10",
"#babel/node": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"body-parser": "^1.20.0",
"cors": "^2.8.5",
"express": "^4.18.1",
"nodemon": "^2.0.16",
"preact": "^10.7.1",
"preact-render-to-string": "^5.2.0"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel app.js",
"start": "npm run build && nodemon — exec babel-node app.js"
},
"author": "",
"license": "ISC"
}
app.js
const express = require("express");
const { h } = require("preact");
const render = require("preact-render-to-string");
/** #jsx h */
// silly example component:
const Fox = ({ name }) => (
<div class="fox">
<h5>{name}</h5>
<p>This page is all about {name}.</p>
</div>
);
const app = express();
app.listen(3200);
// on each request, render and return a component:
app.get("/:fox", (req, res) => {
let html = render(<Fox name={req.params.fox} />);
// send it back wrapped up as an HTML5 document:
res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});
A couple issues:
The flag is --exec, not - exec.
You need quotes around your command, i.e, 'babel-node app.js'
-"start": "npm run build && nodemon — exec babel-node app.js"
+"start": "nodemon --exec 'babel-node app.js'"
Not sure why you're running Babel over your project once, and then using babel-node right afterwards. Might've been just something you did while debugging? Either way, not needed.
Below is my current vite config.js/ package.json and tsconfig.json with build with lib configuration, it worked properly using with normal vite build but fails does not work on build lib.
The files are generated in dist folder but app doesn't loads
vite.config.js
`/* eslint-disable import/no-extraneous-dependencies */
import reactRefresh from '#vitejs/plugin-react-refresh';
import path from 'path';
import { Alias, defineConfig } from 'vite';
import * as tsconfig from './tsconfig.paths.json';
function readAliasFromTsConfig(): Alias[] {
const pathReplaceRegex = new RegExp(/\/\*$/, '');
return Object.entries(tsconfig.compilerOptions.paths).reduce(
(aliases, [fromPaths, toPaths]) => {
const find = fromPaths.replace(pathReplaceRegex, '');
const toPath = toPaths[0].replace(pathReplaceRegex, '');
const replacement = path.resolve(__dirname, toPath);
aliases.push({ find, replacement });
return aliases;
},
[] as Alias[],
);
}
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, "src/main.tsx"),
name: "Aagam",
},
rollupOptions: {
external: ["react"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: 'React',
},
},
},
minify: true,
sourcemap: false,
},
plugins: [reactRefresh()],
resolve: {
alias: readAliasFromTsConfig(),
},
css: {
modules: { localsConvention: 'camelCase' },
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`
}
}
}
});
> `
package.json
"name": "reporting-ui-component",
"version": "1.0.0",
"files": [
"dist"
],
"typings": "./dist/reporting-ui-component.d.ts",
"main": "./dist/reporting-ui-component.umd.js",
"module": "./dist/reporting-ui-component.es.js",
"scripts": {
"dev": "vite",
"build": "tsc && vite build && tsc -P tsconfig.dts.json",
"serve": "vite preview",
"start": "npm run dev",
"lint:fix": "eslint src --ext .jsx,.js,.ts,.tsx --quiet --fix",
"lint:format": "prettier --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
"lint": "yarn lint:format && yarn lint:fix ",
"type-check": "tsc",
"lint-staged": "npx lint-staged -r",
"validate": "npm run style",
"validate-commit": "npm run lint-staged",
"style": "npx -q eslint src --ext .ts,.tsx --fix"
}
tsconfig.dts.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"declarationDir": "dist",
"emitDeclarationOnly": true
},
"include": ["src"]
}
It would be great if you could provide some solution to it?
I am getting error on running above config
In order to make sure your project is rendered from the output generated by lib, make sure to refer the start point of your app i.e. index.html to have the below script
<script src="/dist/<your-file-name>.umd.js"></script>
in place of previous path
<script type="module" src="/src/main.tsx"></script>
and it should start working
I'm starting with es6 and capacitorjs.
I need to build a google auth for an app.
I followed this instructions here https://github.com/CodetrixStudio/CapacitorGoogleAuth.
Tried too many different things, looks like there is an issue about not serving the node_modules folder in my webserver, but I really can't figure out what is wrong.
I'm attaching an image which represents my directory structure:
The index.js file is declared in index.html file like this:
<html>
<head>
<meta name="google-signin-client_id" content="{your client id here}">
</head>
<body>
<h1>my title</h1>
</body>
<script src="capacitor.js"></script>
<script src="index.js" type="module"></script>
<script >
//this is working properly, but capacitor.js is declared here
console.log('element is loaded...')
Capacitor.Plugins.Storage.set({key:'test', value:'val'});
Capacitor.Plugins.Storage.get({ key: 'test' }).then(function(result) {
document.querySelector('h1').innerText = 'chave:' + result.value;
});
</script>
</html>
the index.js file goes below:
import "../#codetrix-studio/capacitor-google-auth";
import { Plugins } from '../#capacitor/core';
Plugins.GoogleAuth.signIn();
My console output:
My package.json file:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"#capacitor/android": "^2.4.6",
"#capacitor/cli": "^2.4.6",
"#capacitor/core": "^2.4.6",
"#codetrix-studio/capacitor-google-auth": "^2.1.3",
"serve": "^11.3.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "yarn serve www"
},
"author": "",
"license": "ISC"
}
Found it.
Just needed to add a code transpiler.
In my case, i added parceljs.
yarn global add parcel-bundler
Later, i made a new folder to keep my source code.
mkdir frontend
Finally, added a new script called watch in my package.json file
"scripts": {
"watch": "parcel watch frontend/*.html --out-dir www"
}
I had tried hours to setup eslint-plugin-vue, but the lint output is always empty (no stdout and stderr), I must have missed something very basic?
Commands
$ node --version # v9.4.0
$ npm install
$ $(npm bin)/eslint . # Empty output
File structure
Foo
├── .eslintrc.js
├── main.vue
└── package.json
.eslintrc.js
module.exports = {
"extends": [
"plugin:vue/recommended"
]
}
package.json
{
"name": "Foo",
"version": "0.1.0",
"devDependencies": {
"eslint": "^4.17.0",
"eslint-plugin-vue": "^4.2.2"
}
}
main.vue
<template>
</template>
<script>
!##$%^UIYTHRE
</script>
Do $(npm bin)/eslint . --ext .vue
The eslint command checks only .js files by default. You have to specify additional extensions by --ext option.