How to develop javascript library like jquery using es6 and webpack? - javascript

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?

Related

Event handling is not working in a fresh react project

I've been trying my first steps with react.js and after playing around a bit (installing Bootstrap, adding some loaders for LESS & Co.) at some point the event handlers (onSubmit, onChange) stopped working. At first, I thought I just messed up my code.
However, when I copy the example for a controlled components form into a freshly initialized npm project with React 17.0.2, these handlers are still not working as expected. E.g. the onSubmit handler:
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
Neither does the alert show, nor is the default event handling prevented. The page simply reloads when I hit the submit button.
For example, if I put an alert into the constructor it is being shown.
Here is the full package.json
{
"name": "app-retry",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3"
}
}
and here is the full webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
dev: {
hot: true,
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// attach the presets to the loader (most projects use .babelrc file instead)
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
]
},
plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') })]
};
The index.js is
import React from "react";
import ReactDOM from "react-dom";
// lines as copied from the react example
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
and finally the index.html template
<html>
<head>
<title>Hello world App</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
What am I doing wrong? Is the example code wrong or is there a flaw in my setup?

webpack config missing in vuejs

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

Angular 2 not loading component

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/

Cannot find module "bundle.js"

I have a strange problem.... (Please, ignore my bad English :v)
I'm making app using HTML/CSS and js with jQuery. I'm using webpack too. I was using webpack-dev-server command since today - everything was working perfect. I wanted to generate single file - "bundle.js" without using server, cause i wanted to open app at another pc, without webpack.
That's how game looks like when it works
When I changed config in package.json from:
"start": "webpack-dev-server ./src/scrable.js"
To:
"start": "webpack ./src/scrable.js ./bundle.js"
I don't have any errors in my CMD console, when I typed "npm start".
But, when I opened my index.html file I saw in "source" mode that I have one error, which means that browser 'Cannot find module "bundle.js"'.
App is working, but not like it should - elements react for clicks, they're running some functions, but... just look at this:
That's how game looks like when it doesn't work
Do you have any ideas?
This is my package.json file
{
"name": "jstest_",
"version": "1.0.0",
"description": "",
"main": "scrable.js",
"scripts": {
"start": "webpack ./src/scrable.js ./bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
And this is my webpack.config.js file
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/scrable.js",
output: {
path: __dirname,
filename: "bundle.js",
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};

Issues parsing async functions with webpack

I'm trying to get webpack to parse a javascript file that is using the new async/await syntax, but it keeps giving me a parsing error.
Here is my webpack.config.js file:
module.exports = {
entry: {
foo: './foo.js'
},
output: {
filename: 'webpack-compiled.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
My package.json file:
{
"name": "async-func-test",
"version": "1.0.0",
"description": "",
"main": "foo.js",
"scripts": {
"buildWithBabel": "babel foo.js --out-file babel-compiled.js",
"buildWithWebpack": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-syntax-async-functions": "^6.13.0",
"webpack": "^1.13.3"
}
}
My babel.rc file:
{
"plugins": [
"syntax-async-functions"
]
}
And the foo.js file:
async function asyncFunc() {
return 123
}
asyncFunc().then(x => console.log(x))
If I run the npm script 'buildWithBabel', it runs fine with no errors and creates the babel-compiled.js with the proper output.
However if I run the npm script 'buildWithWebpack', I get the following error message:
ERROR in ./foo.js
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:6)
I don't need to transform the async functions, just parse it. I'm not sure why it's not working for webpack as it should using the "syntax-async-functions" plugin in the .babelrc right?
You will need to use the transform-regenerator plugin as well, syntax-async-functions only allows Babel to parse the input (and then leave it alone). Webpack doesn't understand ES8 syntax yet, that's why it fails without having them transpiled.

Categories