Babel convert path jsx to js

Question

I am using babel to transpile some es2015 code to es5, like this:

"scripts": {
    "build:lib": "babel src --out-dir lib --presets=react,es2015,stage-0",
    "clean": "rimraf lib dist coverage",
    "prepublish": "npm run clean && npm run build:lib" 
}

It is converting it fine to es5. The problem is that babel is not changing the path among files. It changes the extension of the file from .jsx to .js, but inside the file, it is still referencing the file as .jsx.

To simplify it, the folder structure looks like this. Babel has changed the extensions of the .jsx files:

- index.js
- Component.js

While inside index.js, it is doing keeping the .jsx extension:

require('./Component.jsx');

Am I missing something? Is there a better way to do this? Thanks for you help:)

Shiroo · Answer 1 · 2016-11-08T14:29:21.043

1

Why won't you simply use Webpack for that? Is there a reason for that? especially that you are also missing setting up node_env production so it will avoid adding propTyping etc.

es3ify is just for changing the code, while you are trying to build a library out of it. you need a tree builder like Webpack for something like that (how es3ify would know about the references between each other?)

So tl;dr there is a better solution for that: use Webpack.

module.exports = {
  devtool: 'source-map',

  entry: [
    path.join(__dirname, '/src/index.jsx')
  ],

  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ]
};

edited Nov 08 '16 at 14:29

answered Nov 08 '16 at 14:11

Shiroo

666
4
11

Webpack is adding a lot of stuff I don't need. I find it useful to make bundles, but in this case, I just want the same folder structure but in ES5, which I am getting it fine, with the problem mentioned above. How would you do that in Webpack? – Alberto Centelles Nov 08 '16 at 14:22
You can decide by yourself what do you want to have over there. I can asure you that you can do the same thing like you have above in the Webpack I will edit answer and post webpack config example – Shiroo Nov 08 '16 at 14:27
Ofcourse it will create a bundle rather than only translated file. Though webpack also gives you additional adhoc posibilites like COmpressionPlugin or Deduping, or even better tree shaking elements that you are not using (if you are not using stage-0 ofcourse but single handedly pick plugins to avoid translation to CommonJS). – Shiroo Nov 08 '16 at 14:30

score 0 · Answer 2 · edited May 23 '17 at 12:01

As Shiroo suggested, I ended up using webpack for this. The key concept here was understanding what resolvers do. They are really well explained in the webpack docs: https://webpack.github.io/docs/resolving.html

  resolve: {
    root: path.resolve('./src'),
    extensions: ['', '.js', '.jsx']
  }

Later, I encountered that all the node_modules were also included in the bundle, despite having it explicitly inside the loader:

module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        include: path.resolve('./src'),
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }

This issue is better explained here https://stackoverflow.com/a/35820388/4929834

Babel convert path jsx to js

2 Answers2