express配置babel

小灰灰 2022-06-10 01:37 165阅读 0赞

[原文地址：老树新芽，在ES6下使用Express][ES6_Express]

要让Express在ES6下跑起来就不得不用转码器Babel了。首先新建一个在某目录下新建一个项目。然后跳转到这个目录下开始下面的操作。

## 简单走起 ##

安装babel-cli  
`$ npm install --save-dev babel-cli`

然后，可以安装一些presets  
$ npm install –save-dev babel-preset-es2015 babel-preset-stage-2\`

现在就应该安装express了  
`$ npm install --save express`

再创建一个我们要运行的index.js  
`$ touch index.js`

添加如下代码

import Express from 'express';
    
    let app = Express();
    
    app.get('/', (req, res) => {
        res.send(`hello world!`);
    });
    
    app.listen(4321, () => {
        console.log('server running http://localhost:4321');
    });

在package.json里添加运行的脚本

"scripts": {
    +   "start": "babel-node index.js --presets es2015,stage-2"
    }

现在开始运行我们的server。  
`$ npm start`

你现在就可以在[http://127.0.0.1:4321][http_127.0.0.1_4321]下看到hello world了。

## 使用nodemon监视文件修改 ##

我们可以修改npm start，添加对nodemon的引用。

$ npm install –save-dev nodemon  
修改脚本。

"scripts": {
    - "start": "babel-node index.js"
    + "start": "nodemon index.js --exec babel-node --presets es2015,stage-2" 
    }

运行server  
`$ npm start`

你现在就可以修改index.js，而且因为有了nodemon我们的server会在修改发生后自动重启。

在server还在运行的时候，修改index.js，把hello world改成YO YO YO!。然后刷新页面，你就会看到页面内容已经是YO YO YO!了。

## 准备生产环境 ##

使用babel-node只是可以让server运行起来，但是还不能上产品环境。

我们需要预编译我们的代码，那么现在就来开始准备上生产。

首先把index.js文件移到lib/index.js。  
`$ mv index.js lib/index.js`

接下来修改npm start脚本。

"scripts": {
    - "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
    + "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2"
    }

这还不够，还需要添加两个task npm run build和npm run server。

"scripts": {
     "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
    + "build": "babel lib -d dist --presets es2015,stage-2",
    + "serve": "node dist/index.js"
    }

现在就可以使用npm run build累预编译了。npm run server可以在产品环境启动server。  
`$ npm run build $ npm run server`  
这样我们就可以很快的重启server而不需要等着babel预编译文件。

刚刚新添加了dist目录，这个目录需要排除在git之外。所以给.gitignore文件添加dist。

`$ touch .gitignore dist`  
这样就确保不会一不小心把gist的文件上传了。

## 把Babel选项保存到.Babelrc中 ##

`$ touch .babelrc`  
添加如下的配置。

{
      "presets": ["es2015", "stage-2"], 
      "plugins": []
    }

现在就可以在npm脚本里去掉那些多余的选项了。

"scripts": {
    +   "start": "nodemon lib/index.js --exec babel-node",
    +   "build": "babel lib -d dist", 
        "serve": "node dist/index.js"
      }

## 测试server ##

最后我们需要 保证server经过了严格的测试。

安装mocha。  
`$ npm install --save-dev mocha`

在test/index.js里创建测试代码。  
`$ mkdir test`  
`$ touch test/index.js`

import http from 'http';
    import assert from 'mocha';
    
    import '../lib/index.js';
    
    describe('Example Node Server', () => {
        it('should retur 200', done => {
            http.get('http://127.0.0.1:4321', res => {
                assert.equal(200, res.statusCode);
                done();
            });
        });
    });

接下来安装babel-register。  
`$ npm install --save-dev babel-register`

然后添加npm test脚本。

"scripts": {
        "start": "nodemon es6_express_app.js --exec babel-node",
        "build": "babel lib -d dist",
        "server": "node dist/index.js",
     +   "test": "mocha --compilers js:babel-register"
      }

现在来运行测试。

`$ npm test`  
你会看到下面的内容。

server running http://localhost:4321
      Example Node Server
        ✓ should return 200 (61ms)

1 passing (85ms)  
OK，全文完！

[ES6_Express]: https://segmentfault.com/a/1190000006707756?utm_source=tuicool&utm_medium=referral
[http_127.0.0.1_4321]: http://127.0.0.1:4321