Question

我是javascript和javascript构建脚本的新手，我正在尝试构建一个未来的＆＃34;面向未来的＆＃34;构建用于构建ReactJS / Redux应用程序的脚本。我在导入javascript文件之间的工作时遇到了麻烦。

我的问题是为es2016风格的导入语句添加支持的推荐方法是什么？

由于我一直在努力让这项工作得以实现，因此这些问题和评论在我脑海中流传，有助于我来自哪里。

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

以下是我尝试使用Gulp工作的一个简单示例。目前，当Gulp运行时，会创建一个bundle，但import语句似乎不起作用。当我尝试加载index.html时，所有内容看起来都是一致的，我得到了javascript错误。

more 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;
}

more 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应用程序而无需配置构建工具：Create React App。你可能想要在Github上尝试那个或者一个可用的样板启动器，除非你喜欢修改构建脚本。它的灵活性较低，但如果您希望减少配置量，它就可以完成工作。

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

1 个答案: