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"] 
    } 
    } 
}