Instead of getting the default output js file like index.abc123.js from vite build, I want to tell it what to name the output file. But I'm not sure how to do that. Here's my current vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
watch: {
usePolling: true
}
},
build: {
emptyOutDir: true,
outDir: '../public',
assetsDir: './dist',
}
})
Update: It took quite a bit of fiddling around to figure out what would work for our folder structure, but I finally found out how to do what I was looking for. Here's our final vite.config.js and packages.json Hopefully it helps someone else.
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig(({ command, mode }) => ({
plugins: [vue()],
server: {
watch: {
usePolling: true
}
},
build: {
emptyOutDir: true,
outDir: '../public',
minify: mode === 'development' ? false : 'terser',
rollupOptions: {
output: {
assetFileNames: 'client/rsc/[ext]/[name][extname]',
chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
entryFileNames: 'client/rsc/js/client.js'
}
}
}
}));
packages.json
{
"name": "webpp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build --base=/public/",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.41"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.2.0",
"vite": "^3.2.0"
}
}
Related
I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.
Problem
I'm making custom eslint plugin referencing working with plugins and generator-eslint. Then I make a monorepo using yarn workspace and turbo repo like following structure:
file structure
apps
service
.eslintrc.js
index.ts (written to throw eslint error)
package.json
packages
eslint-plugin-custom
lib
rules
func-prefix-matching.js
index.js
.eslintrc.js
package.json
package.json
turbo.json
The key files of it is:
apps/service/.eslintrc.js
module.exports = {
root: true,
extends: ['eslint:recommended'],
plugins: ['eslint-plugin-custom'],
env: {
node: true,
es6: true,
},
rules: {
"custom/func-prefix-matching": ['error']
}
};
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "*",
"typescript": "^4.5.3"
}
}
packages/eslint-plugin-custom/lib/rules/func-prefix-matching.js
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'suggestion', // `problem`, `suggestion`, or `layout`
docs: {
description: 'exmaple',
recommended: false,
url: null, // URL to the documentation page for this rule
},
fixable: null, // Or `code` or `whitespace`
schema: [], // Add a schema if the rule has options
messages: {
example: 'example',
},
},
create(context) {
const { options } = context;
const {include = [], exclude = [] } = options[0]||{};
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: `${name} should start with ${allPrefix.join(", ")}.`,
});
}
}
},
};
},
};
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.0",
"description": "ESLint plugin",
"keywords": [
"eslint",
"eslintplugin",
"eslint-plugin"
],
"author": "inflab",
"main": "./lib/index.js",
"exports": "./lib/index.js",
"files": [
"lib",
"README.md"
],
"scripts": {
"lint": "eslint .",
"test": "mocha tests --recursive --watch"
},
"dependencies": {
"requireindex": "^1.2.0"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-plugin-eslint-plugin": "^5.0.0",
"eslint-plugin-node": "^11.1.0",
"mocha": "^10.0.0"
},
"engines": {
"node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
},
"peerDependencies": {
"eslint": ">=7"
},
"license": "ISC"
}
package.json
{
"name": "custom-lint",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --parallel",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"test": "turbo run test"
},
"devDependencies": {
"prettier": "latest",
"turbo": "latest"
},
"engines": {
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "yarn#1.22.19"
}
turbo.json
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {},
"lint": {
"outputs": []
},
"dev": {
"cache": false
},
"test": {}
}
}
issue
Now, eslint make output:
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
So I edit code like:
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
...
messages: {
messageId: 'message',
},
},
create(context) {
...
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: 'messageId',
});
}
}
},
};
},
};
Then yarn workspace automatically make symlink to the eslint-plugin-custom package and I can see the latest edited code in (project root)/node_modules/eslint-plugin-custom. But the same error is occurred.
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
what I tried
It looks like cache problem, so I run yarn cache clean. But not work
I change the plugin version like
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.1",
...
}
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "1.0.1",
"typescript": "^4.5.3"
}
}
to match exact version, but it does not work.
removing node_modules dirs and re-install, not work.
what I expect
I expect
the plugin work correctly
to see the output of eslint change when I edit plugin code
Is there any help... :(
I am using webpack 5 with typescript and a node.js app.
My folder structure is
src/
server.ts
mymodule.ts
public/
index.html
main.ts
utils.ts
but I want to output the compiled files as
dist/
server.js
mymodule.js
public/
index.html
bundle.js
This is my package.json
{
"name": "to-do",
"version": "1.0.0",
"description": "An application for to do list",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node server.js",
"debug": "node --inspect server.js",
"build": "webpack",
"serve": "webpack serve"
},
"license": "MIT",
"dependencies": {
"express": "^4.18.1",
"filenamify": "^5.1.1",
"html-webpack-plugin": "^5.5.0",
"http": "^0.0.1-security",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"keywords": [
"todo"
],
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^18.0.6"
}
}
This is my webpack configuration
import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: {
bundle : './src/public/main.ts'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
target:'node',
resolve: {
extensions: ['.ts', '.js'],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/public/index.html',
scriptLoading:"module"
})
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
clean: true
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
hot: true,
static: {
directory: './dist',
},
compress: true,
port: 3002,
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin'
}
},
stats: {
errorDetails:true
}
};
I get an error about server.js can't be resolved, since I assume it looks at the main from package.json.
ERROR in ./src/public/main.ts 3:0-36
Module not found: Error: Can't resolve './server.js' in 'C:\Users\Desktop\4\src\public'
resolve './server.js' in 'C:\Users\Desktop\4\src\public'
using description file: C:\Users\Desktop\4\package.json (relative path: ./src/public)
using description file: C:\Users\Desktop\4\package.json (relative path: ./src/public/server.js)
no extension
How can I resolve this?
I can't seem to get rid of this error.
I've tried removing package-lock.json & node_modules followed by npm install, but, it's not working.
Node Version: 12.18.3
NPM Version: 6.14.8
Any help is appreciated!
Lovely Error
ERROR in ./src/scripts/Test.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: compiler.parseComponent is not a function
at parse (some path\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (some path\node_modules\vue-loader\lib\index.js:67:22)
# ./src/scripts/app.js 8:0-30 10:10-14
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vue/compiler-sfc": "^3.0.2",
"vue-loader": "^15.9.4",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"vue": "^3.0.2"
}
}
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/scripts/app.js',
output: {
filename: 'scripts/app.js'
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
// Fixes the "vue-template-compiler" error.
compiler: require('#vue/compiler-sfc')
}
}
]
}
]
},
watch: true
};
src/scripts/app.js
import { createApp } from 'vue';
import Test from './Test.vue';
createApp(Test).mount('#app');
src/scripts/Test.vue
<template>
<p>{{ message }}</p>>
</template>
<script>
export default {
data() {
return {
message: "I'm giving up!"
}
}
}
</script>
Steps to fix the problem:
Upgrade vue-loader to ^16.0.0-beta.9.
Change const VueLoaderPlugin = require('vue-loader/lib/plugin');
to const { VueLoaderPlugin } = require('vue-loader');.
Im getting an error : unexpected token when importing a component-class while within another component class.
Im new to react, webpack and still learning javascript nodejs callbacks hooks, Im reading and search for best practices regardig nodejs and react on how to setup my dev-environment on Ubuntu.
A lot of trial and error to figure out whats going on behind the scene.
Im able to connect to my single page if I dont add as soon as I add import it raises an error.
// main.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';
ReactDOM.render( <App /> , document.getElementById('root'));
// App.jsx
import React from 'react';
import {SubmitButton} from './components/SubmitButton';
export default class App extends React.Component {
render(){
return(<div><h1>Hi, I am a header!</h1></div>);
}
}
// SubmitButton.jsx
import React , {Component} from 'react';
export class SubmitButton extends Component{
constructor() {
super();
}
render() {
return(<div>Swing</div>);
}
}
// $npm run start ... webpack.config.js :
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
}
// ERROR
ERROR in ./src/components/SubmitButton/SubmitButton.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /appdevops/graphCRMcli/src/components/SubmitButton/SubmitButton.jsx: Unexpected token (8:9)
6 | }
7 | render() {
> 8 | return(<div>
| ^
9 | <SubmitButton>Swing</SubmitButton>
10 | </div>
11 | );
at Parser.raise
///package.json file
{
"name": "MyClient",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"cross-spawn": "^7.0.0",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {}
}
// .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// HtmlWebpackPlugin is used to inject our created bundles into this html file so // we need to create it.
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
});
module.exports = {
mode : 'development',
entry: {
app: ['./src/main.jsx'],
vendor: ['react', 'react-dom']
},
output: {
path: '/appdevops/graphCRMcli/dist',
libraryTarget: 'umd',
filename: '[name].js'
},
devServer: {
host : '0.0.0.0',
compress: true,
port: 3000
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
HtmlWebpackPluginConfig
],
};
I solved it by adjusting webpack.config.js and :
removing .babelrc
adding contents of .babelrc to webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react" ]
}
}
}
]
}