My vuejs app's package.json looks like
package.json
{
"name": "vue_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.6",
"#vue/cli-plugin-eslint": "^3.0.0-beta.6",
"#vue/cli-service": "^3.0.0-beta.6",
"#vue/eslint-config-standard": "^3.0.0-beta.6",
"lint-staged": "^6.0.0",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [
"#vue/app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"#vue/standard"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}
Upon building the vue app, it generates an index.html file while looks like,
dist/index.html
<body>
<noscript><strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div
id=app></div>
<script type=text/javascript>
(function(r){var n=window["webpackJsonp"];window["webpackJsonp"]=function(e,u,c){for(var i,f,p,l=0,a=[];l<e.length;l++)f=e[l],t[f]&&a.push(t[f][0]),t[f]=0;for(i in u)Object.prototype.hasOwnProperty.call(u,i)&&(r[i]=u[i]);n&&n(e,u,c);while(a.length)a.shift()();if(c)for(l=0;l<c.length;l++)p=o(o.s=c[l]);return p};var e={},t={2:0};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,n,e){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(r){var n=r&&r.__esModule?function(){return r["default"]}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="/",o.oe=function(r){throw console.error(r),r}})([]);
//# sourceMappingURL=/js/manifest.bb41d6d8.js.map
</script>
<script type=text/javascript src=/js/vendor.be88a6a7.js></script>
<script type=text/javascript src=/js/app.5edcb6c7.js></script>
</body>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>Flask + Vue.js Template</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
On running static files are failed to get fetched , ie. /js/vendor.be88a6a7.js returns 404 but it can be fetched by calling /static/js/vendor.be88a6a7.js url. So I have to prepend /static to all the static url paths. But I don't find any webpack.conf file located on that directory.
source code
In vue cli 3 the webpack config file is generated dynamically at runtime. It has been abstracted away. That is the reason you don't see a webpack config file.
You can find the webpack config file here:
<projectRoot>/node_modules/#vue/cli-service/webpack.config.js
This is the file that is dynamically resolved.
The output.publiPath is / by default in the webpack config file. If you want to check want is webpack config file looks like you can use vue inspect command in your command line or via vue ui -> click Tasks -> click inspect. It prints out a serialized format only meant for inspection of the config file.
But if you want to configure the webpack config you can make use of the vue.config.js file.
If you do not have vue.config.js file, then create it in root of your project.
Then add the following:
// vue.config.js
module.exports = {
configureWebpack: {
output: {
publicPath: '/static/'
}
}
}
Resources:
Vue-Cli 3 docs
Configuring Webpack
Related
I am learning how to display a webview on vs code. i used this website and the code below is copied from it. https://mishka.codes/webviews-in-vscode#:~:text=Webviews%20display%20custom%20HTML%2C%20CSS%20%26%20JS%20inside,CSS%20and%20Javascript%20files%20to%20the%20webview.%20
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
let openWebview = vscode.commands.registerCommand('exampleApp.openWebview', () => {
const panel = vscode.window.createWebviewPanel(
'openWebview', // Identifies the type of the webview. Used internally
'Example Page', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{ // Enable scripts in the webview
enableScripts: true //Set this to true if you want to enable Javascript.
}
);
}
context.subscriptions.push(openWebview);
}
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Webview</title>
</head>
<body>
<h1>This works!</h1>
//Add some custom HTML here
</body>
</html>`;
}
There is an error in the authors extension.ts but it goes away when edit the code so it looks like this (all i added as a ')' and a ';' above the word context):
...
{ // Enable scripts in the webview
enableScripts: true //Set this to true if you want to enable Javascript.
}
);
});
context.subscriptions.push(openWebview);
}
However, when i run the extension the HTML does not show up on the tab in VS code. Can someone help me identify what is wrong? I have left the package-lock.json as is (i used yo code to skaffold the extension). i will post my package.json below
{
"name": "webview",
"displayName": "webview",
"description": "webview test",
"version": "0.0.1",
"engines": {
"vscode": "^1.54.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:exampleApp.openWebview"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "exampleApp.openWebview",
"title": "Open webview"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/vscode": "^1.54.0",
"#types/glob": "^7.2.0",
"#types/mocha": "^9.1.1",
"#types/node": "16.x",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"eslint": "^8.20.0",
"glob": "^8.0.3",
"mocha": "^10.0.0",
"typescript": "^4.7.4",
"#vscode/test-electron": "^2.1.5"
}
}
I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.
When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.
I then import my rust function into a typescript file like:
import { run } from '../../../../Rust/skunk/pkg/skunk_lib';
My package.json looks like this:
{
"name": "skunk_interactive",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"primeicons": "^5.0.0",
"primevue": "^3.12.6",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.17",
"#vue/cli-plugin-eslint": "~4.5.17",
"#vue/cli-plugin-router": "~4.5.17",
"#vue/cli-plugin-typescript": "~4.5.17",
"#vue/cli-plugin-unit-jest": "~4.5.17",
"#vue/cli-plugin-vuex": "~4.5.17",
"#vue/cli-service": "~4.5.17",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^2.0.0-0",
"#wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
When I try to run npm run serve I get the following error:
Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| case 0:
| if (typeof input === 'undefined') {
> input = new URL('skunk_lib_bg.wasm', import.meta.url);
| }
|
I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.
I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.
Any thoughts on what might be going wrong?
I ran into a problem with the '#wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.
I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js
21 │ plugins: [
22 │ new WasmPackPlugin({
23 │ crateDirectory: __dirname,
24 + │ extraArgs: "--target web"
25 │ }),
26 │ ]
rust side preperation
in cargo.toml file
[dependencies]
wasm-bindgen="0.2.63"
[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]
inside rust file
use wasm_bindgen::prelude::*;
Inside .rs file you have to decorate any function or type with #[wasm_bindgen]
#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
Yes,
No,
}
Javascript preparation:
You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.
// package.json of your javascript project
"dependencies": {
// other dependencies
.....
// assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
"skunk_lib": "file:../pkg",
},
run npm install to load the pkg module. skunk_lib should be in the node_modules
Inside your javascript file:
// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";
I am trying to create a simple javascript library to learn something new. I am trying to use es6 and webpack. Everything is working fine but I am stuck at one point, when I try to use it as standalone, I mean when I add <script src="bundle.js"></script> to my HTML page and try to access MyLibrary variable. It gives me ReferenceError.
Can someone please guide me how to properly setup and compile code so that it could be run without require.js etc.
I understand your question as mainly being about getting from typescript to
an importable library which can be included in HTML and used in your <script>..</script>.
If this is correct you can use the below minimal setup. At least it should get you started.
package.json:
{
"name": "qlib",
"version": "1.0.0",
"scripts": {
"build": "webpack --progress --colors --config webpack.config.js",
"start": "webpack-dev-server --content-base ./ "
},
"license": "ISC",
"devDependencies": {
"ts-loader": "^4.1.0",
"typescript": "^2.7.2",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"noImplicitAny": false,
"lib": [
"es6",
"dom"
]
}
}
webpack.config.js:
var webpack = require("webpack");
module.exports = {
entry: './main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"],
},
output: {
filename: 'bundle.js',
libraryExport: 'default',
library: 'qlib'
}
};
main.ts: (the library entry point)
export class QLib {
public helloWorld() {
console.log("hello world");
}
}
var QInstance = new QLib();
export default QInstance;
index.html:
<html lang="en" >
<head>
<meta charset="utf-8">
<title>MyLib Testing </title>
</head>
<body>
<script src="dist/bundle.js" type="text/javascript"></script>
<script>
qlib.helloWorld();
</script>
<p>testing</p>
</body>
</html>
And finally install, build and start:
npm install && npm run build && npm start
To make your own js library you make a js file just like normal and attach it just as you seem to be doing. Your issue might be coming in where you are referencing MyLibrary. Are you referencing the variable before your js file loads?
I am using a ReactJS tutorial from Here on setting up my first component.
Now the code in my files looks exacly the same:
//index.js
import React from "react";
import {
render
} from "react-dom";
class App extends React.Component {
render() {
return(
<div>
<h1> Hello </h1>
</div>
);
}
}
render( <App/> , window.document.getElementById('app'));
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ReactJS Basics</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/app/bundle.js"></script>
</body>
</html>
Also, this is my webpack.config.js file:
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}
};
module.exports = config;
And package.json:
{
"name": "reactjs-basics",
"version": "1.0.0",
"description": "Lol",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
},
"keywords": [
"reactjs"
],
"author": "Alan",
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
I am running the server with the npm start command from the package.json
But for some unknown reason, when rendering the app I get this error:
Uncaught Error: _registerComponent(...): Target container is not a DOM
element.
I really have no idea how to fix this issue, all the other similar problems here contain having the script tags above the hook div, which is not the real case here.
Has anyone here had similar problems to this?
Any help would be amazing
I am trying out Angular2 and I started with an example here
I can run npm install and npm start without errors, but the Component is not loaded. The selector points to my-app but the content in the tag is never replaced. I end up seeing 'Loading...' in the browser.
All code is directly copied from the sample using copy paste. I have not edited anything at all. I wonder if the sample simply does not work or if this could be something caused by my development environment?
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
package.json
{
"name": "angular2-demo",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
environment_app.component.ts
import {Component, View} from "angular2/core";
#Component({
selector: 'my-app'
})
#View({
template: '<h2>My First Angular 2 App</h2>'
})
export class AppComponent {
}
environment_main.ts
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"
bootstrap(AppComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': './angular2/src/app' }
});
System.import('app/environment_main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
A suggestion
If you are looking for starting up in Angular try and use angular cli to build your project .
Angular cli link - https://cli.angular.io/
create project using
ng new my-project
cd my-project
ng serve
you can also check my repo if you wish to hosted on gh-pages
Link - https://rahulrsingh09.github.io/AngularConcepts/