Configuration Files#
Because the preferred installation is based on TypeScript, it's very recommended to use WebPack and TypeScript's configuration file tsconfig.json.
Project#
The package.json of your project may look like this:
{
"name": "your-project",
"version": "0.0.0",
"description": "My first @nyaf project",
"main": "index.js",
"scripts": {
"test": "echo \"no test defined\"",
"start": "webpack-dev-server",
"build": "webpack"
},
"devDependencies": {
"@types/node": "^12.12.26",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.0.2",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"ts-loader": "^7.0.5",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.9.5",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"@nyaf/cli": "~0.7.4",
"@nyaf/lib": "~0.7.3"
}
}
Of course, you have to add anything you might need in addition to that, such as CSS frameworks, fonts, or specific libraries. Also it's worth to note that the various WebPack plug-ins are just a recommendation and you can replace the whole packer stuff with whatever you like. The only thing really needed is the package @nyaf/lib.
TypeScript#
The tsconfig.json looks like this:
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"sourceMap": true,
"lib": [
"es2018",
"es5",
"dom"
],
"jsx": "react",
"declaration": true,
"reactNamespace": "JSX",
"experimentalDecorators": true,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"outDir": "out-tsc",
"baseUrl": "src",
"typeRoots": [
"node_modules/@types",
"src/types"
]
}
}
WebPack#
The webpack.config.json looks like this (with SCSS support and dev server):
const dev = process.env.NODE_ENV === 'dev';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Main entry point
const indexConfig = {
template: './src/index.html',
inject: 'body',
baseHref: './'
};
const webpackConfig = {
mode: 'development',
// How source maps are generated : style of source mapping
devtool: dev ? 'eval-cheap-module-source-map' : false,
// Development server configuration
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
// Where webpack looks to start building the bundle
entry: {
app: './src/main.ts' // Demo app entry point
},
// How the different types of modules within a project will be treated
module: {
rules: [
{ test: /\.ts|\.tsx$/, loader: 'ts-loader' },
// All files with a '.scss' extension will be handled by sass-loader
{
test: /\.(scss)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
// })
},
// CSS loader
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
// Configure how modules are resolved
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
},
// How and where webpack should output bundles, assets and anything else
output: {
path: path.resolve('./dist'),
filename: '[name].js'
},
// What bundle information gets displayed
stats: {
warnings: false
},
// Target a specific environment (cf. doc)
target: 'web',
// Customize the webpack build process with additionals plugins
plugins: [
new HtmlWebpackPlugin(indexConfig)
]
};
// Export the config
module.exports = webpackConfig;
The package.json gets an entry in scripts
section:
build: "webpack",
The Build Process#
Now, on command line, just type npm run build
.
To start WebPack's dev server type:
npm start
An now enjoy writing a component based SPA with only 34 KB of lib code in total.