如何编译导入的ES6节点模块？

Question

I have an app written in ES6, and I am using babel to transform all of the files within that app. This app also includes a node_module with React components (that is also written in ES6).

I am importing the components like so:

import { Box } from 'components/Box'

When I run

babel-node --presets es2015,stage-0,react

on the file that is importing the Box component, I get an error in the components/Box file on line 1:

(function (exports, require, module, __filename, __dirname) { import React, { Component } from 'react'
                                                              ^^^^^^
SyntaxError: Unexpected token import

I think the reason why this is happening is because babel-node is not transpiling the node_modules. Which, makes sense, since most node modules are written in commonjs format. Is there a way to whitelist this particular node-module so it can be transpiled?

Answer 1

Can you provide more info? maybe the other files you are referring to? what are you trying to achieve?

I tried running the following package.json and it worked just fine.

{
  "name": "babel-node-test",
  "version": "1.0.0",
  "description": "",
  "main": "something.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "react": "^0.14.7"
  }
}

with these files as test:

something.js

import { Box } from './components/Box';

and components/box.js

import React, { Component } from 'react';

class Box extends Component{

}

export default Box;

Also, on a side note, quoting from the docs:

Not meant for production use You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

why not use any of the build systems mentioned here https://babeljs.io/docs/setup/