We Keep Coding

I need help adding environment variables to my TypeScript toolchain

I am requesting help setting up the compilation and dev environment for a typescript library. The library should work when consumed by a web app framework and when consumed by a script tag. I am currently using Webpack as a dev server so I can debug and TSC to build (cjs + esm). The issue that prompted this post was having to constantly switch my API strings between http://localhost:8080 to https://production.com. What tools or changes do I need in order to build dev and prod variables into my compilation?
Here is what I'm doing so far:
package.json fragment
"main": "./lib/cjs/index.js",
"module": "./lib/esm/index.js",
"files": [
"lib/**/*",
"README.md"
],
"scripts": {
"build:esm": "tsc -p tsconfig.json --outDir lib/esm --module ES2020 --sourceMap false",
"build:cjs": "tsc -p tsconfig.json --outdir lib/cjs --module commonjs --sourceMap false",
"clean:build": "rimraf lib",
"clean:serve": "rimraf dist",
"build": "rimraf lib && npm run build:esm && npm run build:cjs",
"serve": "rimraf dist && webpack-dev-server"
}
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const SRC = path.resolve(__dirname, 'src')
const ENTRTY = path.resolve(__dirname, 'src', 'debug.ts')
const DIST = path.resolve(__dirname, 'dist')
module.exports = {
mode: 'development',
context: SRC,
entry: ENTRTY,
output: {
path: DIST,
filename: 'index.js',
},
devtool: 'source-map',
devServer: {
contentBase: DIST,
writeToDisk: true,
host: '0.0.0.0',
port: 8080,
https: true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
],
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
include: [SRC]
}
]
}
}
My toolchain does not currently allow me to do do this:
import Axios from 'axios'
import SocketIO from 'socket.io-client'
export const axios = Axios.create({
baseURL: process.env.SERVER_HTTP_URL, //<-- can't do env-vars with tsc build
withCredentials: true
})

typescript cant not do that, but gulp can do it
const replace = require('gulp-replace');
const { src, dest } = require('gulp');
exports.default = function() {
return src(['*.js'], {base: './'})
.pipe(replace('__XXXX__', 'some variables'))
.pipe(dest('./'));
}

How to build an npm package so it is able to be imported/required

I have built an npm package and published it onto NPM.
When i npm install <my-package> and then import MyPackage from "#Acme/MyPackage"; into react i get the following error.
Module not found: Can't resolve #Acme/MyPackage
Is this becasue of how i have setup my sdk package. You can find the webpack config i use to build it below.
Btw this works if i import the script tag directly in the header, but how can i import it like this without specifically defining the script tag in the header?
webpack.config.js
const path = require('path');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-package.min.js',
libraryTarget: 'umd',
library: 'MyPackage'
},
devtool: 'source-map',
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.(js)$/,
use: 'babel-loader'
}
]
},
node: {
console: false,
global: true,
process: true,
__filename: 'mock',
__dirname: 'mock',
Buffer: true,
setImmediate: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
// See "Other node core libraries" for additional options.
},
plugins: [
// new UglifyJSPlugin({ sourceMap: true }),
new CopyWebpackPlugin([
{ from: 'test/index.html', to: '' }
]),
],
};

It seems like the import doesn't know where to import the package from but since it's already in your node_modules folder I'm going to guess that either you don't have an index.js file or you haven't defined your main entry file for you package.
Every NPM package will look for an index.js file but if you have want to rename it you can actually define it in your package.json
{
"name": "yourpackage",
"version": "x.x.x",
"main": "another-name.min.js",
}

Babel setup error: "ERROR in ./src/js/index.js"

UPDATE: I fixed the issue. Look in answers.
Goal: Set up Babel.
Issue: I run into an error when I use webpack to create a bundle.js file using the command: npm run dev.
screenshot 1 screenshot 2
./src/js/index.js
import num from "./test";
const x = 45;
console.log(`I imported ${num} from test.js - ${x}`);
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: ["babel-polyfill", "./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.js"
},
devServer: {
contentBase: "./dist"
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html"
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};

I fixed the error. Turns out I needed to install new Babel packages.
npm install --save-dev #babel/core #babel/preset-env
npm install --save #babel/polyfill
Replace entry in webpack.config.js with:
entry: ["#babel/polyfill", "./src/js/index.js"],
Replace presets in .babelrc with:
{
"presets": ["#babel/env"]
}

Looks like you're missing babel-core
I think running:
npm install --save-dev babel-core
Should fix it

React & Webpack: Loading failed for the <script> with source http://localhost:8080/app/bundle.js

I am new in reactjs. I tried to configure react with basic index page including index.js(containing a console.log()) but when i tried to run server index.html showing properly but bundle.js is not loading. I search it a lot but not getting proper answer can any one help me please.
my webpack.config.js is
// Webpack config js.
var webpack = require("webpack");
var path = require("path");
var DIST_VAR = path.resolve(__dirname, "dist");
var SRC_VAR = path.resolve(__dirname, "src");
var config = {
entry : SRC_VAR + "\\app\\index.js",
output: {
path: DIST_VAR + "\\app\\",
filename: "bundle.js",
publicPath : "\\app\\",
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_VAR,
loader: "babel-loader",
query: {
presets: [ "react" , "es2015" , "stage-2"]
}
}
]
}
};
module.exports = config;
Error is showing in console: Loading failed for the with source “http://localhost:8080/app/bundle.js”.
Edit:
Folder Listing added..
Folder PATH listing
Volume serial number is BE9C-4E51
C:.
| package-lock.json
| package.json
| webpack.config.js
|
+---dist
| | index.html
| |
| \---app
| bundle.js
|
+---node_modules
| <Here the node_modules>
\---src
| index.html
|
\---App
index.js

I'll make some assumptions without seeing your project folder structure.
Looks like it could be your publicPath. Unless that's what you intended, the /app folder shouldn't be visible and since your console is showing "localhost:8080/app/bundle.js" that means it's looking for "project-root/src/app/app/bundle.js" instead of "project-root/src/app/bundle.js"
In the webpack docs they're telling you to default to root '/' and looking at my own webpack file thats what mine is currently set to as well.
Reference:
https://webpack.js.org/guides/public-path/
Edit: Here's an example using Webpack 3. Version 4 just came out and this will not work, so I'd be careful where you're getting your config examples from if you are using Webpack 4.
const webpack = require('webpack');
const path = require('path');
module.exports = {
plugins: [
// new webpack.NamedModulesPlugin(),
// new webpack.HotModuleReplacementPlugin()
],
context: path.join(__dirname, 'src'),
entry: [
// 'webpack/hot/dev-server',
// 'webpack-hot-middleware/client',
// 'babel-polyfill',
// 'history',
'./index.js'
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
}],
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
},
};

after installing
npm init -y
and
npm install --save-dev webpack webpack-dev-server webpack-cli
and your structure files
src/
build/
webpack.config.js
package.json
go to package.json, and add build command:
"scripts": {
"start":"webpack serve --mode development",
"build":"webpack"
},
in webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, './build'),
},
};
so,in your build/index.html
<script type="text/javascript" src="./bundle.js"></script>

Bundle JS files with webpack scripts?

I'm super new to webpack and I do not seem to find a way to bundle JS files as I did with Gulp in a very easy way. I've been searching a bit but didn't find any straight answer to it.
Right now I'm creating two minified files by using in my package.json file, but I would love to have a single one instead:
"scripts": {
"stand-alone": "concurrently 'webpack --config=webpack.config.js src/whatever.vue demos/build.min.js --output-library=whatever1' 'webpack --config=webpack.config.js src/whatever2.js demos/mixin.min.js --output-library=whatever2'",
},
Then my webpack.config.js looks like this:
const webpack = require('webpack');
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
})
],
};

I believe you are looking for entry points.
In your webpack.config.js module exports object:
Define the entry property:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
},
Define the output property:
output: {
path: '/path/to/assets', // ex. '../../wwwroot/dist'
filename: '[name].js', // Substitutes [name] with the entry name, results in app.js
publicPath: '/'
},
Change your script to:
"scripts": {
"stand-alone": "webpack --config=webpack.config.js",
},
If you are using Vue + Webpack, I recommend that you take a look to vue-cli and generate a project using the webpack template. It is more advanced, but you can see the documentation and get an idea of what you are missing.
Run the following:
npm install -g vue-cli // install vue cli globally
vue init webpack my-project // create a sample project
If you want to generate multiple output files, you can have more than one entry point like so:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
mixins: './path/to/mixins.js',
vendors: ['./path/to/vendor.js', './path/to/vendor2.js']
},
This will write to disk ./path/to/assets/app.js, ./path/to/assets/mixins.js, /path/to/assets/vendors.js.