MERN应用程序中的Babel配置

Question

我已经放弃尝试学习rails。我现在集中精力尝试使用MERN堆栈开始使用节点。我完成了Stephen Grider和Andrew Mead的udemy课程以及所有的code js课程。恐怕我没有一个有希望的开始。

我一直在让我的导入语句正常工作。到目前为止，我试图导入文件。为此我需要巴贝尔。我的package.json有：

"scripts": { 
    "test": "mocha test/**/*-test.js --compilers js:babel-core/register --recursive", 
    "start": "nodemon -w server.js server.js --source-maps" 
    }, 
    "author": "Ol", 
    "license": "MIT", 
    "dependencies": { 
    "axios": "^0.16.1", 
    "babel-cli": "^6.24.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-polyfill": "^6.13.0", 
    "body-parser": "^1.17.1", 
    "caniuse-api": "^2.0.0", 
    "express": "^4.13.4", 
    "lodash": "^4.17.4", 
    "material-ui": "^0.18.0", 
    "nodemon": "^1.11.0", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-promise": "^1.1.2", 
    "react-redux": "^5.0.4", 
    "react-router": "^4.1.1", 
    "react-tap-event-plugin": "^2.0.1", 
    "redux": "^3.6.0", 
    "redux-devtools": "^3.4.0", 
    "redux-form": "^6.7.0", 
    "redux-thunk": "^2.2.0", 
    "socket.io": "^2.0.1", 
    "source-map-support": "^0.4.15" 
    }, 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babelify": "^7.3.0", 
    "enzyme": "^2.8.2", 
    "mocha": "^3.3.0", 
    "react-addons-test-utils": "^15.5.1", 
    "webpack": "^2.5.1" 
    } 
} 

我.babelrc有：

{ 
    "presets": ["react", "es2015"] 
} 

我server.js有：

import express from 'express'; 
import bodyParser from 'body-parser'; 
import { MongoClient } from 'mongodb'; 
import 'babel-polyfill'; 
import SourceMapSupport from 'source-map-support'; 


SourceMapSupport.install(); //to get line numbers with file refs rather than compiled code line numbers 


// const app = express(); 

app.use(express.static('open')); 
app.use(bodyParser.json()); 

app.listen(3000, function(){ 
    console.log('listening on 3000'); 
}); 

我webpack.config.js有：

module :{ 
    rules:[{ 
     // use : 'babel-loader', 
     loader: 'babel-loader', 
     query :{ 
     presets:['react','es2015'] 
     // ,'es2017' 
     }, 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
    }] 

当我尝试使用npm start时，我的进口出现错误rt声​​明。它说：

{ import express from 'express'; 
                   ^^^^^^ 
SyntaxError: Unexpected token import 
    at createScript (vm.js:56:10) 
    at Object.runInThisContext (vm.js:97:10) 
    at Module._compile (module.js:542:28) 
    at Object.Module._extensions..js (module.js:579:10) 
    at Module.load (module.js:487:32) 
    at tryModuleLoad (module.js:446:12) 
    at Function.Module._load (module.js:438:3) 
    at Module.runMain (module.js:604:10) 
    at run (bootstrap_node.js:390:7) 
    at startup (bootstrap_node.js:150:9) 
[nodemon] app crashed - waiting for file changes before starting... 

任何人都可以给我一个关于如何让巴贝尔设置与节点应用程序一起工作的线索。我注意到，即使当我在控制台中运行npm install时，我的应用程序中也没有找到node_modules文件夹。我用纱线来添加依赖到package.json，但似乎没有能力生成一个node_modules文件夹。

下一页尝试

然后我试图NPM初始化，然后NPM升级（即使我用纱线添加模块）。

npm升级的输出是低于，但我仍然没有最终得到一个节点模块文件夹。我认为巴贝尔无法识别我的进口声明的原因是因为我没有在我的应用程序模块。有谁知道如何获得在安装中创建的节点模块文件？我认为这是自动发生的。

npm update 
npm WARN deprecated isarray@2.0.1: Just use Array.isArray directly 

> uws@0.14.5 install /Users/mlc/may/node_modules/uws 
> node-gyp rebuild > build_log.txt 2>&1 || exit 0 

- ms@0.7.3 node_modules/engine.io-client/node_modules/ms 
- debug@2.6.4 node_modules/engine.io-client/node_modules/debug 
- ms@0.7.3 node_modules/finalhandler/node_modules/ms 
- react-addons-create-fragment@15.5.4 node_modules/react-addons-create-fragment 
- react-addons-transition-group@15.5.2 node_modules/react-addons-transition-group 
- ms@0.7.3 node_modules/socket.io-client/node_modules/ms 
- debug@2.6.4 node_modules/socket.io-client/node_modules/debug 
- camelcase@1.2.1 node_modules/uglify-js/node_modules/camelcase 
- cliui@2.1.0 node_modules/uglify-js/node_modules/cliui 
cr@1.0.0 /Users/mlc/may 
├── axios@0.16.2 
├── body-parser@1.17.2 
├── express@4.15.3 
├── material-ui@0.18.2 
├── mocha@3.4.2 
├── react-promise@1.1.3 
├── react-redux@5.0.5 
├── socket.io@2.0.2 
└── webpack@2.6.1 

Answer 1

使用presets: ["es2015", "react", "stage-2"]。

如果要通过导出和导入运行server.js，请添加babel-node。

的package.json

... 
"start": "cross-env NODE_ENV=production babel-node server.js", 
"dev": "nodemon server.js --exec babel-node --presets es2015,react,stage-2" 
... 

.babelrc

{ 
    "env": { 
    "production": { 
     "presets": ["es2015", "react", "stage-2"] 
    }, 
    "development": { 
     "presets": ["es2015", "react", "stage-2"] 
    } 
    } 
}