从零开始搭建node项目,并支持es6和commonjs

1,初始化项目

  1. 创建一个文件夹,执行命令npm init,完成后会在根目录创建一个package.json文件
  2. 根目录创建一个index.js(命名随意)作为我们的入口文件
  3. 以express框架为例:

    执行:cnpm install express --S 安装express
    index.js代码如下:
    const express = require('express') // 引入express
    const app = express()
    
    const port = 3002 // 端口
    
    app.listen(port, () => {
      console.log(`Server running at http://127.0.0.1:${port}`)
    })
    
  4. package.json文件配置项目启动命令
    添加命令:"serve": "node index.js"  

    至此简单的配置就完成了,执行npm run serve就可以启动项目了。

    此时若修改index.js内代码,刷新页面是无效的,可以配置热更新插件nodemon,
    执行命令cnpm install -D nodemon,更改package.json命令如下:

 2,webpack配置

配置webpack作为项目打包工具,执行命令:cnpm i webpack webpack-cli -D 
项目根目录新增webpack.config.js文件

const path = require('path')
module.exports = function (args) {
  return {
    entry: {
      main: path.resolve(__dirname, 'index.js') // 入口文件,需和入口js文件命名,路径匹配
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: `[name].js`
    },
    module: {},
    plugins: []
  }
}

3、支持es6方法

1、import,require二选一

require是CommonJS模块中的一个方法,import是ES6中引入的声明语句和方法

node应用由模块组成,采用CommonJS模块规范,所以在node项目中使用import或者export会报错,node v13.2.0之前,是不支持 ES6 模块化的,可在package.json中做如下修改

{
  "type": "module",
  "scripts": {
    "start": "node --experimental-modules index.js"
  }
}

如此设置之后如果用require引用模块的话启动会报错: ReferenceError: require is not defined,type默认配置是"commonjs",只支持require引用,type:"module",只支持import引用,所以要混用import和require的话还得另寻他法。

2、支持import和require混用方法:babel

 - 安装以下babel包

"devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.5",
	"@babel/node": "^7.16.5",
	"@babel/plugin-transform-runtime": "^7.16.5",
	"@babel/preset-env": "^7.16.5",
	"babel-loader": "^8.2.3",
	"nodemon": "^2.0.15",
	"webpack": "^5.65.0",
	"webpack-cli": "^4.9.1"
}

- 修改运行命令为

{
    "serve": "nodemon --exec babel-node index.js"
}

 - 项目根目录新增babel.config.js

module.exports = {
	  presets: ['@babel/env'],
	  plugins: ['@babel/plugin-transform-runtime']
}    

 - webpack.config.js增加配置

module: {
	rules: [
	   {
	      test: /\.js$/,
	      use: {
	         loader: 'babel-loader'
	      },
	      exclude: '/node_modules/'
	    }
	]
},

 - 配置完成后将index.js中require改为import引入

// const express = require('express')
import express from 'express'

 - 执行npm run serve项目正常启动

 4、项目打包运行

 - package.json配置打包命令

{
	"build": "webpack",
	"play": "node ./dist/main.js"
}    

 - 执行npm run build打包成功之后执行npm run play,先终止npm run serve,否则会报端口被占用

执行npm run play之后报了一个错误是“ES Modules may not assign module.exports or exports.*”,这个问题没有百度到结果,最后在谷歌上搜到了办法:
babel.config.js中添加代码:

'sourceType': 'unambiguous'

之后重新打包后顺利运行

源码见github:https://github.com/HappyLilyWen/nodeEs6

打包后运行错误总结见:node打包运行错误总结:从零开始搭建node项目,并支持es6和commonjs_我是一个框子的博客-CSDN博客

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值