- Sample setup for Nodejs + Webpack + Typescript *
## Checkout from git
mkdir -p /home/hemant/Desktop/Node_Projects/typescript_webpack_01
cd /home/hemant/Desktop/Node_Projects/typescript_webpack_01
git clone https://git.affinity.com/hemantkumar.patel/node_setup.git .
## Removing .git to avoid accidental push
rm -f .git
## Installing node packages
npm install
npx webpack
ls dist/
> dist/bundle.js.map
> dist/bundle.js
> docker run --name node4 --hostname node4 -v /home/hemant:/home/hemant:rw -it ubuntu:20.04 bashapt-get update
apt-get install nodejs npm vim -yfunction npmll(){
## Helper dunftion to list all available version of package
echo "Latest top 5 versions ";
npm view $1 versions --json | tail -n 6 | awk -vpkg="${1}" -F '"' '{print "npm i -D " pkg "@" $2 }'
echo "Currenlty installed version ";
npm list $1;
echo -ne "\n\nRemoving eisting package\n"
echo "npm uninstall ${1}";
echo "";
}
npmll tscuseradd hemant
mkdir -p /home/hemant
chown hemant:hemant /home/hemant##Init new Node project
npm init --ynpm install --save-dev \
typescript \
ts-loader \
webpack \
webpack-cli \
wrapper-webpack-plugin \
declaration-bundler-webpack-plugin \
copy-webpack-plugin \
clean-webpack-plugin \
@types/node \
@types/webpack \
@types/google-publisher-tagvim package.json
vim tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"sourceMap": true
}
}vim webpack.config.jsconst path = require('path');
const WrapperPlugin = require('wrapper-webpack-plugin');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
// strict mode for the whole bundle
new WrapperPlugin({
test: /\.js$/, // only wrap output of bundle files with '.js' extension
header: '(function (W,D,N) { "use strict";W[N]=W[N]||{};if(W[N].hb23){return;}W[N].hb23="20221228";\n',
footer: '\n})(window,document,"__afflib");'
})
],
mode: "production",
output: {
chunkLoadingGlobal: 'AffChunk',
chunkLoading: 'jsonp',
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// libraryTarget: 'amd',
// library: "AffHb2023",
}
};mkdir src
echo "export function add( a:number , b:number ) : number { return a + b ; } " > src/lib.ts
echo -ne "import { add } from './lib'
console.log( add(1,3) )
" > src/index.ts######## Also source map enaled in production, you can utilise it
npx webpack
cat dist/bundle.js
cat dist/bundle.js.mapnpx webpack --mode development watch
npx webpack watch
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent