Babelify 在导入时忽略文件扩展名

Question

我正在写一个React application with ES6 and JSX。下面是我用来将 .es6 文件浏览成 bundle.js.

的命令

$ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js

当我尝试使用 import MenuBar from './menu' 之类的方法导入组件时，我收到错误消息：

Error: Cannot find module './menu'

我发现的唯一解决方法是将 .es6 添加到文件名 (import MenuBar from './menu.es6')，这看起来不太吸引人。

有没有办法让 browserify or babelify 知道在导入模块时要使用哪些扩展？

Answer 1

尝试：

browserify src/es6/app.es6 -t babelify -o build/js/bundle.js \
--extension=.js --extension=.json --extension=.es6

Babelify 应在其末端默认处理 .es6。

顺便说一句，如果可以的话，通常最好针对 browserify API 编写脚本，而不是使用 CLI。在这种情况下，它将类似于：

var
  browserify = require('browserify'),
  babelify = require('babelify'),
  path = require('path'),
  fs = require('fs');

browserify('src/es6/app.es6', {
  extensions: ['.js', '.json', '.es6'],
})
  .transform(babelify)
  .bundle()
  .pipe(fs.createWriteStream(path.join(__dirname, 'build/js/bundle.js')));

Babelify 在导入时忽略文件扩展名

Babelify omit file extension on import

browserify

ecmascript-6

reactjs

babeljs