为什么简写作业在我的 babel 设置中不起作用？

Question

Background

I am currently in the process of migrating the backend of my project to ES6 via babel and am running into an error that seems to be related to a short-hand assignment that is not working anymore? I am not familiar with babel. Might be that I am not seeing something super obvious here.

Problem

now when trying to run my app in dev via yarn start I am seeing the following error (simplified example) this did work prior to setting up babel (I am on node.js 13.13.0 ). Any idea what's going on here?

Codesnippet:

const a = {
  hi:1, bye:2, ciao: 3
}
const b  = {hi, bye} = a
console.log(b)

Errormessage:

[nodemon] restarting due to changes...
[nodemon] starting `NODE_ENV=development babel-node server.js server.js`
/Users/user/Projects/fb/fb-flow-app/server/config/config.js:21
var b = (_a = a, hi = _a.hi, bye = _a.bye, _a);
                    ^

ReferenceError: hi is not defined
    at Object.<anonymous> (/Users/user/Projects/fb/fb-flow-app/server/config/config.js:12:8)
    at Module._compile (internal/modules/cjs/loader.js:1123:30)
    at Module._compile (/Users/user/Projects/fb/fb-flow-app/server/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Object.newLoader [as .js] (/Users/user/Projects/fb/fb-flow-app/server/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:972:32)
    at Function.Module._load (internal/modules/cjs/loader.js:872:14)
    at Module.require (internal/modules/cjs/loader.js:1012:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/user/Projects/fb/fb-flow-app/server/server.js:1:14)
[nodemon] app crashed - waiting for file changes before starting...

High-level project structure:

root
|-frontend
|-server

The frontend is a next.js project and has it's own .babelrc which seems to be working.

Steps taken so far

I've installed a couple of babel-dev-dependencies (in my server folder):

"devDependencies": {
    "@babel/cli": "^7.10.1",
    "@babel/core": "^7.10.2",
    "@babel/node": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    ...
}

and also tried (with no result)

@babel/plugin-transform-shorthand-properties
@babel/plugin-transform-spread

I've configured my nodemon.json :

{
    "watch": ["../server"],
    "exec": "NODE_ENV=development babel-node server.js",
    "ext": "js"
}

I've set up a .babelrc

{
    "presets": ["@babel/preset-env"]
}

And then I am running via:

"scripts": {
    "start": "concurrently --prefix none \"cd server && NODE_ENV=development yarn nodemon server.js\" \"cd frontend && yarn dev\""
},

Answer 1

When you do the following:

const a = {
  hi:1, bye:2, ciao: 3
}
const b  = {hi, bye} = a

Babel sees an assignment to two variables, named hi and bye that don't yet exist. It seems that Babel is operating in strict mode where this is an error. You'll get the same in Node while in strict mode. Solve this by defining them explicitly:

const a = {
  hi:1, bye:2, ciao: 3
}
let hi, bye;
const b  = {hi, bye} = a

Destructuring does not make an object, despite it looking like an object initialization.

Note how, because of that, the value of b is not an object that looks like {hi:1, bye:2} but a reference to a , just like what would happen if you just do const b = a :

const b = a;
a.hi = 5;
console.log(b.hi); // 5

Other things you can do:

• const {hi, bye} = a; to get two const variables named hi and bye (rather than var or let )
• const {hi: b, bye: c} = a; to get two variables named b and c ("renaming")
• const {hi, bye} = a; const b = {hi, bye}; to make an object with just those two keys in variable b , but this will also create variables hi and bye .