使用 Gulp 创建浏览器友好的 js 文件，包括导入

Question

同构反应

我想将我的 React 组件服务器端转换成一个 bundle.min.js 文件。我遇到的问题是该文件无法解析导入语句。

这是我要转译的文件 (client/component.js)

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/app';

ReactDom.render(<App />, document.getElementById('app'));

结果是这样的(bundle.min.js)

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _app = require('./components/app');

var _app2 = _interopRequireDefault(_app);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(_app2.default, null), document.getElementById('app'));

但这不是我想要的。

我需要的文件

我需要删除所有导入语句并替换为我需要的实际文件。就我而言，我需要

节点模块中的一些文件
部分组件文件

Gulp 目前功能

// builds the components and clientside
gulp.task('buildComponentsClient', () =>
  gulp.src(['./client/*.js'])
  .pipe(include()).on('error', console.log)
  .pipe(babel({ presets: ['es2015', 'react']}))
  .pipe(concat('bundle.js'))
  // .pipe(uglify({mangle: false}))
  .pipe(rename('bundle.min.js'))
  .pipe(gulp.dest('./public'))
);

问题

我如何创建一个浏览器友好的文件，其中包含这些简约反应元素文件中指定的所有依赖项？

Answer 1

据我了解，您不想将 browserify 与 babelify 结合使用。这是我的 gulp 任务：

import gulp from 'gulp';
import glob from 'glob';
import browserify from 'browserify';
import babelify from 'babelify';
import rename from 'gulp-rename';
import source from 'vinyl-source-stream';
import es from 'event-stream';
import uglify from 'gulp-uglify';
import buffer from 'vinyl-buffer';

const path = './client/';
const files = '*.js';
const bundles = [path + files]; // I use an array to be able to bundle
                                // multiple paths within the same task

gulp.task('bundle', () => {
  let bundleAll = bundles.map(bundle);

  return Promise.all(bundleAll); // Task ends when all bundles are done
});

// Bundle files found in bundlePath, returns a Promise resolved
// when all files have been processed
function bundle(bundlePath) {
  return new Promise((resolve, reject) => {
    glob(bundlePath, (err, files) => {              // Create glob from path
      var tasks = files.map(file => {               // loop through each file
        return browserify(file)                     // pass it to browserify
          .transform(babelify, ["es2015", "react"]) // using babelify (browserify + babel)
          .bundle()                                 // ..profit!
          .on('error', err => {
            console.error('err', err.toString());
            reject(err);
          })
          .pipe(source(file)) // this is required for browserify output to be use as a gulp stream
          .pipe(buffer())     // needed by gulp-uglify
          .pipe(uglify())
          .pipe(rename({ 'bundle.min.js' }))
          .pipe(gulp.dest('./public'));
      });
      es.merge(tasks).on('end', resolve); // When all files have been processed, resolve the promise we returned
    });
  });
}

使用 Gulp 创建浏览器友好的 js 文件，包括导入

Using Gulp to create browser friendly js file, including imports

javascript

node.js

gulp

isomorphic-javascript

同构反应

我需要的文件

Gulp 目前功能

问题