Express專案搭建及配置
目錄宣告：本文記載為筆者根據官方檔案及網上的博客創建Express專案以及對其進行專案配置的簡單筆記，非精心創作，旨在記錄，不保證其方法的優越性，
- Express專案搭建及配置
- 創建Express專案
- 配置專案熱加載
- nodemon
- express專案配置支持 es6模板語法
- 安裝babel
- 配置babel
- express專案配置允許跨域加載
創建Express專案
- 運行Express生成器(只需一次)
npx express-generator
- 創建Express專案
express --view=pug myapp(myapp是專案名)
此應用將在當前目錄下的 myapp 目錄中創建，并且設定為使用 Pug 模板引擎
運行結果：
express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
-
安裝依賴
進入myapp檔案夾，使用
npm install或yarn，安裝依賴
cd myapp
npm install(或yarn)
- 啟動專案
npm start
出現如下結果：
PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-express> npm start
> [email protected] start E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-express
> node ./bin/www
以上結果表示運行成功，但是并不會自動打開瀏覽器，需要自行啟動，
啟動方法：在./bin/www中，找到啟動埠，默認是3000，然后再瀏覽器訪問：localhost:3000,即可，
配置專案熱加載
express專案并不像react等前端框架，能夠實時更新，即熱加載，需要安裝相關插件，實作類似效果，
nodemon
使用nodemon實作熱加載，
nodemon可以檢測檔案狀態，并自動執行程式關閉和啟動的操作，當專案檔案發生改變時，nodemon會自動停止專案運行，然后重新啟動，無需你自己操作，在使用上相當于是熱加載了，但實際上是偽熱加載，
- 安裝nodemon
npm install -g nodemon //全域安裝
npm install --save-dev nodemon //安裝為開發依賴
- 啟動專案
安裝成功后，啟動專案不再使用 npm start (等同于 node ./bin/www package.json中 start 處)，而是
nodemon ./bin/www
運行結果：
PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-express> nodemon ./bin/www
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`
由上可看到，實際上是nodemon工具幫你執行了 node ./bin/www
修改代碼看看：
express專案配置支持 es6模板語法
express默認是以CommonJS語法撰寫的，不支持ES6語法，若要是其支持，則需要安裝和配置 babel
安裝babel
- 安裝
babel-core
npm install --save babel-core
- 安裝
babel-preset-env或babel-preset-es2015
npm install --save babel-preset-env
或
npm install --save babel-preset-es2015
- 安裝
babel-cli
pm install babel-cli -g
配置babel
- 在根目錄下新建檔案
.babelrc
//.babelrc
{
"presets": ["env"],
"plugins": []
}
- 使用
babel-node來決議 js程式，并用 nodemon來實作熱加載
修改 package.json 檔案中的scripts
"scripts": {
"start": "nodemon --exec babel-node ./bin/www" //./bin/www是你的啟動檔案
}
express專案配置允許跨域加載
- 方法：在 app.js中添加如下代碼：
app.all('*', (req, res, next) => {
const { origin, Origin, referer, Referer } = req.headers;
const allowOrigin = origin || Origin || referer || Referer || '*';
res.header("Access-Control-Allow-Origin", allowOrigin);
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Credentials", true);
res.header("X-Powered-By", 'Express');
if (req.method == 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/182701.html
標籤：.NET技术
上一篇：NPOI操作EXCEL