0

我是 javascript 和 javascript 构建脚本的新手，我正在尝试构建一个“面向未来”的构建脚本来构建 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 运行时，它会创建一个包，但 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
4

1 回答 1

1

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

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

于 2016-09-23T13:29:09.120 回答