使用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 複製程式碼
一點點記錄，一步步成長，加油~~~~