Babel 将路径 jsx 转换为 js答案

【问题标题】：Babel convert path jsx to jsBabel 将路径 jsx 转换为 js
【发布时间】：2017-03-22 03:51:32
【问题描述】：

我正在使用 babel 将一些 es2015 代码转换为 es5，如下所示：

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

它可以很好地转换为 es5。问题是 babel 没有改变文件之间的路径。它将文件的扩展名从 .jsx 更改为 .js，但在文件内部，它仍然将文件引用为 .jsx。

为简化起见，文件夹结构如下所示。 Babel 更改了 .jsx 文件的扩展名：

- index.js
- Component.js

虽然在 index.js 中，但它正在保留 .jsx 扩展名：

require('./Component.jsx');

我错过了什么吗？有一个更好的方法吗？谢谢你的帮助:)

【问题讨论】：

标签： reactjs webpack ecmascript-6 babeljs

【解决方案1】：

你为什么不简单地使用 Webpack 呢？这有什么原因吗？特别是您还缺少设置 node_env 生产，因此它将避免添加 propTyping 等。

es3ify 仅用于更改代码，而您正在尝试从中构建库。你需要一个像 Webpack 这样的树构建器来完成类似的事情（es3ify 如何知道彼此之间的引用？）

所以 tl;dr 有一个更好的解决方案：使用 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
      }
    })
  ]
};

【讨论】：

Webpack 添加了很多我不需要的东西。我发现制作捆绑包很有用，但在这种情况下，我只想要相同的文件夹结构，但在 ES5 中，我得到它很好，上面提到的问题。你会如何在 Webpack 中做到这一点？
你可以自己决定你想在那里拥有什么。我可以向您保证，您可以在 Webpack 中执行与上述相同的操作，我将编辑答案并发布 webpack 配置示例
当然它会创建一个包，而不仅仅是翻译文件。尽管 webpack 还为您提供了额外的临时可能性，例如 COmpressionPlugin 或 Deduping，或者甚至是您不使用的更好的摇树元素（如果您当然不使用 stage-0，而是单独选择插件以避免转换为 CommonJS）。

【解决方案2】：

正如 Shiroo 建议的那样，我最终为此使用了 webpack。这里的关键概念是了解解析器的作用。它们在 webpack 文档中得到了很好的解释：https://webpack.github.io/docs/resolving.html

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

后来，我发现所有 node_modules 也包含在包中，尽管它明确地包含在加载器中：

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

这里可以更好地解释这个问题https://stackoverflow.com/a/35820388/4929834

【讨论】：