使用 express 应用生成器搭建项目
使用一下命令安装生成器
$ npm install express-generator -g
使用 - h 查看命令选项
- $ express -h
- Usage: express [options][dir]
- Options:
- -h, --help output usage information
- --version output the version number
- -e, --ejs add ejs engine support
- --hbs add handlebars engine support
- --pug add pug engine support
- -H, --hogan add hogan.js engine support
- -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig| vash) (defaults to jade)
- -c, --CSS <engine> add stylesheet <engine> support (less|stylus|compass| sass) (defaults to plain css)
- --git add .gitignore
- -f, --force force on non-empty directory
创建名为 node-sticky 的 express 应用程序
$ express --pug --css=less node-sticky// 我默认安装了 less 和 pug 模板引擎
安装依赖
- $ cd node-sticky
- $ npm install
启动应用程序
- $ npm start
- > node-sticky@0.0.0 start /node-sticky
- > node ./bin/www
在浏览器输入 localhost:3000 就可以看到欢迎画面了
目前的目录结构
- app.js
- bin
- www
- package.json
- public
- images
- javascripts
- stylesheets
- style.css
- routes
- index.js
- users.js
- views
- error.pug
- index.pug
- layout.pug
添加 src 目录, 配置相应的 webpack
我们把前端的源码放在 src 目录下, 使用 webpack 打包到 node 的 public 目录下面添加之后的目录结构为:
- app.js
- bin
- | www
- package-lock.json
- package.json
- public
- | images
- | javascripts
- | stylesheets
- | style.less
- routes
- | index.js
- | users.js
- src // 前端源码目录
- | js
- | | app //webpack 入口目录
- | | | index.js
- | | lib // 一些工具目录
- | | | module //js 模块
- | less //less 目录
- | webpack.config.js //webpack 配置文件
- views
- error.pug
- index.pug
- layout.pug
我使用的 mac 的 tree 命令生成目录树, 具体命令: tree -l 4 --ignore=node_modules, 把依赖目录忽略
配置 webpack
配置之前需要先安装一下 webpack 依赖
$ npm install webpack --save-dev
然后简单配置 webpack 入口文件和出口文件
- let webpack = require('webpack')
- let path = require('path')
- module.exports = {
- entry: path.join(__dirname,'/js/app/index.js'),
- output: {
- path: path.join(__dirname,'../public'),
- filename: 'js/index.js'
- }
- }
在终端运行 webpack
- $ cd src
- $ webpack
- Hash: 80c9ec3163fbc2ca01c3
- Version: webpack 4.3.0 Time: 265ms Built at: 2018-3-29 05:21:58 Asset Size Chunks Chunk Names js/index.js 676 bytes 0 [emitted] main Entrypoint main = js/index.js [0] ./js/module/b.js 36 bytes {0} [built] [1] ./js/module/a.js 36 bytes {0} [built] [2] ./js/app/index.js 65 bytes {0} [built]
- WARNING in configuration
- The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
- ~~~
最后给一个警告, 要加上 webpack 运行的环境, 在后面加上就好了
$ webpack --mode development
配置 package.json 的 script 脚本
但是我们不能一直在 src 里面执行, 我们要在根目录下执行, 所有要使用 package.json 里面的 srcipt 字段脚本命令需要配置 webpack 的 --config 指定脚本文件
- //package.json
- {
- "name": "node-sticky",
- "version": "0.0.0",
- "private": true,
- "scripts": {
- "start": "node ./bin/www",
- "webpack": "webpack --config=src/webpack.config.js --mode=development"
- },
- "dependencies": {
- "cookie-parser": "~1.4.3",
- "debug": "~2.6.9",
- "express": "~4.16.0",
- "http-errors": "~1.6.2",
- "less-middleware": "~2.2.1",
- "morgan": "~1.9.0",
- "pug": "2.0.0-beta11",
- "webpack": "^4.3.0"
- }
- }
然后进入个目录执行 npm run webpack 就会发现报错了
- $ cd ..
- $ npm run webpack
- > node-sticky@0.0.0 webpack /Users/lanbo/projects/node-sticky
- > webpack --config=src/webpack.config.js
- The CLI moved into a separate package: webpack-cli.
- Please install 'webpack-cli' in addition to webpack itself to use the CLI.
- -> When using npm: npm install webpack-cli -D
- -> When using yarn: yarn add webpack-cli -D
- npm ERR! code ELIFECYCLE
- npm ERR! errno 1
- npm ERR! node-sticky@0.0.0 webpack: `webpack --config=src/webpack.config.js`
- npm ERR! Exit status 1
- npm ERR!
- npm ERR! Failed at the node-sticky@0.0.0 webpack script.
- npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
- npm ERR! A complete log of this run can be found in:
- npm ERR! /Users/lanbo/.npm/_logs/2018-03-28T21_33_04_687Z-debug.log
根据报错内容需要安装 webpack-cli, 那就照着做吧
$ npm install webpack-cli --save-dev
然后再次执行, 就发现成功啦, 哈哈哈~~ 然后问题来了, 不能每次都要自己手动去 webpack, 有一个工具能自动去打包就好了, 正好有这个工具 --onchange.
$ npm install onchange --save-dev
配置 script 脚本
$ "watch": "onchange'src/**/*.js''src/**/*.less' -- npm run webpack"
在另外开一个终端, 启动脚本就不去管他了, js 和 less 文件有变动会自动去打包
$ npm run watch
一点点记录, 一步步成长, 加油~~~~
关注下面的标签, 发现更多相似文章
- Webpack
- JavaScript
- Express
前端
安装掘金浏览器插件
来源: https://juejin.im/post/5abc0f3bf265da238b7e139b