babel和reactjs:如何使用es2015风格的导入

Question

我是javascript和javascript构建脚本的新手，我正在尝试构建一个构建ReactJS/Redux应用程序的“未来的”构建脚本。我很难让导入在javascript文件之间工作。

我的问题是，建议添加对es2016风格导入语句的支持的方法是什么？

由于我一直在努力使这个工作，这些问题和评论在我的脑海中滚动，帮助我的颜色从哪里来。

• 我只是觉得和古普在一起比较舒服。是否可以仅使用Gulp、Babel和npm来添加对es2016风格导入语句的支持？
• 我想知道Gulp是否仍然是构建javascript包的推荐方法，还是应该学习WebPack。
• 在过去，我曾经使用Browserify来包含其他javascript文件，但是我听说人们提到Browserify可以做Browserify对纯npm所做的事情，而且Browserify可能会失宠。
• 我注意到许多使用ReactJS的WebPack示例。我不知道WebPack在哪里合适，或者是否有必要。我想知道WebPack是否取代了Browserify，我是否需要WebPack，或者我是否可以不使用它。
• 我更喜欢使用任何推荐的导入语法。我相信Browserify使用require()和es2015语法使用"import . from“。我想知道"import . from“是现在用于导入的推荐语法，还是应该使用其他语法。
• 我一直在尝试使用Babel 6来使用to 2015风格的代码。我注意到它没有对导入语句进行预处理，我想我在某个地方读到了Babel 6删除了对import语句的支持。我想知道用什么代替它来处理导入语句。
• 我感兴趣的是尽量减少构建基本项目的配置量(点文件等)。

下面是一个简单的例子，我一直在努力工作，使用Gulp。目前，运行Gulp时，它会创建一个包，但import语句似乎不起作用。当我尝试加载index.html时，所有的内容看起来都是连接在一起的，我会得到javascript错误。

更多package.json

{
  "name": "test_jsx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.14.0",
    "babel-plugin-transform-react-jsx": "^6.8.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cli": "^1.2.2",
    "gulp-concat": "^2.6.0",
    "gulp-print": "^2.0.1",
    "gulp-sourcemaps": "^1.6.0"
  }
}

更多gulpfile.js

var gulp = require("gulp");
var print = require('gulp-print');
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

const paths = {
   src: 'src/**/*js',
   dest: 'build'
}

gulp.task("default", function () {
  return gulp.src(paths.src)
    .pipe(print())
    .pipe(sourcemaps.init())
    .pipe(babel({ presets: ['react', 'es2015', ]}))
    .pipe(concat("bundle.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

更多src/test.js

// This import statement is what I'm trying to get working.
import { square } from './lib';

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

更多src/lib.js

// This is just a example function that I want to try to import
export function square(x) {
        return x * x;
}

更多index.html

<script src="dist/bundle.js"></script>
TEST

构建步骤

npm install 
./node_modules/.bin/gulp

Answer 1

您可以使用webpack或browserify来构建包，但它们都将利用babel提供ES6支持。我不知道你在哪里读到Babel 6删除了导入语句--我使用Babel 6并且没有这样的问题。您也可以用gulp构建包，但我发现它更多工作，而且更难维护。但是，你可能会在这里得到很多固执己见的答案。

Facebook最近提供了一个工具，可以在不需要配置构建工具的情况下引导一个React应用程序：创建。除非您喜欢修改构建脚本，否则您可能想要尝试这一点，或者在Github上使用一个可用的样板启动器。它不那么灵活，但是如果你想减少配置的数量，它就能完成任务。