et-js-boilerplate JS 样板 or 脚手架
A personal or common proj initial proto with gulp、Webpack to bundle ES6, etc & use scripts to do build tasks
安装 Installation
Install it once globally:
npm install -g et-js-boilerplate
用法 Usage
To create a new project, run:
# first step, create the boilerplate. If you want to install packages automatically, please add -i et-js-boilerplate [options] <project-directory> # next, cd into boilerplate's dir, excute npm init to customize your package.json cd <project-directory> && npm init
部署 Deploy
# yarn 与 8.x.x 版本的 npm 之间有冲突还是怎的 # or npm i # then important! 因为必须执行 prebuild 脚本 npm run build # final 该干嘛干嘛,看看 js、css 生效否
开发 Development
# 临时 js、scss 分开编译 # js 部分,运行下面命令,通过 webpack 监听 js 改动,进行增量编译(webpack --watch 也是在内存中还是直接被编译到 dist?) # 之后会做相应变动,使得运行一个命令,自动监听 js 与 scss # 另外,新增页面的 js 入口文件需要更新到 webpack.config.js 的 entry 当中 npm run dev
文件结构 File Structure
root
│
├── dist (for output)
│ │
│ ├── css
│ ├── img (hashed or just dir link)
│ └── js (bundle、uglify)
├── scripts (for build 构建时使用的脚本)
├── src
│ │
│ ├── components
│ ├── img
│ ├── js
│ ├── sass
│ └── views (html or tpl)
├── .babelrc
├── .editorconfig
├── .gitignore
├── .nvmrc
├── gulpfile.js
├── package.json
├── package-lock.json (Don't simply use yarn.lock in npm 8)
├── README.md
└── webpack.config.js (you can make a new webpack dir & custom by yourself)