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.
Related
I created a new repo with $ npm install vue-app and created some test components.
When i run the command $ npm run dev the application starts in localhost port 3000.
I try to add my component in a WP website. When i build the files and add to my theme, i receive the message:
Uncaught SyntaxError: Cannot use import statement outside a module
I found some documentation for webpack but not for vite.config.js.
Anyone can help?
vite.config.js
// vite.config.js
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
package.json
{
"name": "vite-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.5"
}
}
I'm trying to export two web components in a public package on npm, using Vite with TypeScript.
Vite has a Library Mode (https://vitejs.dev/guide/build.html#library-mode) which works well. The ESM and UMD files are both being transpiled into my /dist directory. My question is how to export the web components in the entry point file.
I have an entry point file called export.js
import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'
export default { // I feel like the problem is here.
components: {
AwesomeHeader: AwesomeHeader,
AwesomeFooter: AwesomeFooter,
}
}
The idea is that I'll npm publish the project and use it like this.
npm i #sparkyspider/awesome-components #(ficticious example)
import {AwesomeHeader, AwesomeFooter} from '#sparkyspider/awesome-components' // does not find
(AwesomeHeader and AwesomeFooter are not found as exports in the node_module, even though the JavaScript files are referenced / found)
My package.json below:
{
"name": "#sparkyspider/awesome-components",
"version": "1.0.8",
"files": [
"dist"
],
"main": "./dist/awesome-components.umd.js",
"module": "./dist/awesome-components.es.js",
"exports": {
".": {
"import": "./dist/awesome-components.es.js",
"require": "./dist/awesome-components.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.2",
"#vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.3.3",
"vue-tsc": "^0.0.24"
},
}
You are having object { component: ... } as default export, instead of exporting AwesomeHeader and AwesomeFooter, which you try to import.
export { AwesomeHeader, AwesomeFooter } in export.js will work.
More on export: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
And you can't destruct default export: https://stackoverflow.com/a/43987935/8810271
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"
}
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
I have this folder tree:
my_project_tree
|
├── lerna.json
├── package.json
├── package-lock.json
├── packages
│ └── editor_implementation
│ ├── dist
│ ├── package.json
│ └── src
│
├── yarn-error.log
└── yarn.lock
My editor_implementation/package.json has the following content:
{
"name": "#my_project_tree/editor_implementation",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
my root folder my_project_tree/package.json has the following content:
{
"name": "hocotext",
"version": "1.0.0",
"description": "",
"main": "index.js",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^6.0.0"
},
"devDependencies": {
"lerna": "^3.4.0"
}
}
My lerna.json at root level has the following content:
{
"version": "patch",
"command": {
"publish": {
"ignoreChanges": [
"ignored-file",
"node_modules",
"*.md"
]
},
"bootstrap": {
"ignore": "component-*",
"npmClientArgs": ["--no-package-lock"]
}
},
"npmClient": "yarn",
"useWorkspaces": true,
"packages": ["packages/*"]
}
When I run from root:
yarn workspace packages/editor_implementation add °some packages°
yarn workspace packages/* add °some packages°
lerna add °some packages°
All commands fails with a message abstractable as :
Uknow package...
Package {} not found...
I can't figure out what is wrong since It seems to me I have following all the requirements, if someone has any hint, would be great.
In order to spot your workspaces, you simply have to run :
yarn workspaces info
In my case it returns:
{
"#hoco_editor/editor_implementation": {
"location": "packages/editor_implementation",
"workspaceDependencies": [],
"mismatchedWorkspaceDependencies": []
}
}
So I have run my commands with #hoco_editor/editor_implementation as following:
yarn workspace #hoco_editor/editor_implementation add °some packages°
And it works like a charm.