babel 和 reactjs：如何使用 es2015 样式导入

Question

我是 javascript 和 javascript 构建脚本的新手，我正在尝试构建 "future-proof" 构建脚本来构建 ReactJS/Redux 应用程序。我无法让导入在 javascript 文件之间工作。

我的问题是添加对 es2016 样式导入语句的支持的推荐方法是什么？

由于我一直在努力使这项工作正常进行，因此这些问题和评论在我脑海中盘旋，它们有助于为我的出发点增光添彩。

我对 Gulp 越来越熟悉了。是否可以仅使用 Gulp、Babel 和 npm 来添加对 es2016 样式导入语句的支持？
我想知道 Gulp 是否仍然是构建 javascript 捆绑包的推荐方法，或者我应该学习 WebPack。
过去，我曾经使用 Browserify 来包含其他 javascript 文件，但我听说有人提到你可以用纯 npm 做 Browserify 做的事情，而 Browserify 可能会失败赞成。
我注意到很多使用 WebPack 的 ReactJS 示例。我不确定 WebPack 的适用范围或是否有必要。我想知道 WebPack 是否取代了 Browserify，我是否需要 WebPack 或者我是否可以没有它。
我更愿意使用推荐的任何导入语法。我相信 Browserify 使用 require() 而 es2015 语法使用 "import ... from"。我想知道 "import ... from" 是否是现在用于导入的推荐语法，或者我是否应该使用其他语法。
我一直在尝试使用 Babel 6 来使用 es2015 风格的代码。我注意到它没有预处理导入语句，我想我在某处读到 Babel 6 删除了对导入语句的支持。我想知道用什么来代替它来预处理导入语句。
我对尽量减少构建基本项目的配置（点文件等）感兴趣。

下面是一个简单的例子，我一直在努力使用 Gulp。目前，当 Gulp 运行时，会创建一个包，但导入语句似乎不起作用。当我尝试加载 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 删除了 import 语句 - 我使用 Babel 6 并且没有这样的问题。您也可以使用 gulp 构建捆绑包，但我发现它需要更多工作并且往往更难维护。但是，您可能会在这里得到很多固执己见的答案。

Facebook 最近为 bootstrap React 应用程序提供了一个无需配置构建工具的工具：Create React App。您可能想尝试那个或 Github 上可用的样板启动程序之一，除非您喜欢修改构建脚本。它不太灵活，但如果您希望减少配置量，它就可以完成工作。

babel 和 reactjs：如何使用 es2015 样式导入

babel and reactjs: how to use es2015 style imports

reactjs

npm

gulp

babeljs

gulp-babel