Question

我正在使用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');

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

Answer 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
      }
    })
  ]
};

Answer 2

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

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

后来，我遇到所有node_modules也包含在bundle中，尽管它明确地在加载器中显示：

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

此处https://stackoverflow.com/a/35820388/4929834

可以更好地解释此问题

Babel将路径jsx转换为js

2 个答案: