【问题标题】:Babel config in a MERN appMERN 应用程序中的 Babel 配置
【发布时间】:2017-11-07 06:06:07
【问题描述】:

我已经放弃了学习 Rails。我现在正集中精力尝试使用 MERN 堆栈开始使用 node。我已经完成了 Stephen Grider 和 Andrew Mead 的 udemy 课程以及所有代码学校 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 时,我的 import 语句出现错误。它说:

{ 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...

谁能给我一个关于如何让 babel 设置与节点应用程序一起工作的线索。我注意到,即使我在控制台中运行 npm install ,我的应用程序中也没有 node_modules 文件夹。我用yarn给package.json添加依赖,但是好像没有能力生成node_modules文件夹。

下一次尝试

然后我尝试了 npm init 和 npm upgrade(即使我使用 yarn 来添加模块)。

npm upgrade 的输出如下,但我仍然没有得到节点模块文件夹。我认为 babel 无法识别我的导入语句的原因是因为我的应用程序中没有该模块。有谁知道如何在设置中创建节点模块文件?我以为这是自动发生的。

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 

【问题讨论】:

  • Unexpected token import , its import express from 'express' ;
  • 我不明白你的意思@Kasiriveni - 我的代码中的行是:import express from 'express';

标签: javascript json node.js npm babeljs


【解决方案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"]
    }
  }
}

【讨论】:

  • 我有一个 babelrc 文件——它在上面。我尝试将第 2 阶段添加到它,但我得到了同样的错误
  • 我尝试了你的建议,我收到一条错误消息:你好,未定义? │ |您尝试安装 babel-node。这不是 babel-node ? │ |你应该改为 npm install -g babel-cli ?。 │ |我使用这个模块是为了防止有人推送恶意代码。 ? │ |小心外面,未定义!
  • 你用nodemon,也许试试这个nodemon server.js --exec babel-node --presets es2015,react,stage-2
  • 你会建议我在哪里尝试写那个?我正在尝试使用 nodemon 但我无法让它工作。 -bash: nodemon: 找不到命令
  • 安装nodemon:npm install nodemon -g
猜你喜欢
  • 2022-07-23
  • 2018-01-05
  • 1970-01-01
  • 2019-06-21
  • 2018-12-08
  • 1970-01-01
  • 1970-01-01
  • 2021-05-04
  • 2021-10-18
相关资源
最近更新 更多