reactjs - Babelify 在导入时省略文件扩展名

Question

我正在写一个React申请 ES6和 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或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')));