jamyth-script v2.4.2
jamyth-script (v2)
A CLI tool for one-key setup TypeScript, React, Webpack Version 5.
Feature Includes:
- Gracefully Upgraded to webpack 5
- Create a complete customizable React Project with just a key.
- Easy to switch between Npm and Yarn
- Support Javascript and Typescript.
- Support Scss
- Save time configuring webpack settings.
- Easy to change
webpack.config.js
when needed. - Path Alias support
- Easy Command to generate component and module
Installation and Usage
The easiest way to use jamyth-script
yarn global add jamyth-script
After that, type the following to the console.
jamyth-script new my_awesome_project
Then the cli will automatically generate all the files needed.
File Structure will look like this
* my_awesome_project
|
+-- node_modules
+-- src
| +-- asset
| +-- component
| +-- module
| | +-- main
| | +-- component
| | | +-- Main.tsx
| | | +-- index.scss
| | +-- index.ts
| +-- util
| | +-- async.tsx
| +-- index.tsx
|
+-- static
| +-- index.html
|
+-- package.json
+-- tsconfig.json
+-- webpack.config.js
+-- yarn.lock
Generating Module / Component
In src folder, there will be two folder called component and module. To keep the structure organized. we do not suggest directly added folder and file.
P.S. jamyth-script will automatically detect the language of the project (js | ts) and generate a suitable module / component, so don't worry
Instead, we suggest you to do the following
// First cd to your project directory, or the follow commands cannot
// execute properly.
jamyth-script g module home --state|-s --asset|-a
// --asset -> will generate an asset folder in the module
// --state -> will generate a type.ts for the interface and more
================================================
jamyth-script g component logo --asset|-a
// --asset -> will generate an asset folder in the component
when the installation complete, simply cd the project folder and
yarn start
Code Splitting
To keep your webapp optimized, we provided a dynamic import solution for code splitting. You can apply this feature in two ways.
This functionality is inspired by
React.lazy
. But we also supportNamed Export
as well asDefault Export
.
- Route Component -> Split by Page
- Module / Component -> Split whenever calling another module or component
// Logo.tsx
export const MyLogo = React.memo(() => <img src={mylogo}/>)
// Module.tsx
import { async } from 'util/async'
const myLogo = async(() => import('component/logo'), 'MyLogo')
export const Module = React.memo(() => {
return (
<main>
<myLogo />
</main>
)
})
Start new project with flags
Flags | Description |
---|---|
--npm | use npm as package manager |
--js --javascript | create new project that uses javascript |
Commands
Command | Description | Param Required |
---|---|---|
new <project_name> | Generate a React Project | Yes |
g <module|component|module-component> < name > | Create module or component | Yes |
Todos
npm support-> v2.2.5- react-router
- redux
path alias-> v1.2.23React.memo-> v1.2.23Code Splitting-> v1.3.0non-typescript-> v2.2.5webpack 5-> 2.3.0- and more ...
Known issues
- path alias not working for js project
#Licenses MIT licensed. Copyright (c) Jamyth Luk 2020.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago