Question

我正在通过构建Webpack 4和Gulp 4样板来学习如何使用Webpack 4。 Gulp处理Sass等，Webpack处理JS。

我遵循的教程给了我以下命令来运行构建过程：

NODE_ENV=production gulp build --require babel-register --gulpfile tasks

这是有道理的，但是，我所遵循的教程的示例中包含Babel 6。我已使用@babel/core和@babel/preset-env而不是babel-core和babel-preset-env将项目升级到Babel 7。

但是，这意味着build命令的--require babel-register部分不再起作用。要使Babel 7编译我的Gulp / Wepback文件，以便我可以继续使用import gulp from 'gulp'，将有什么解决方法。

不好意思的术语和解释不好，我一个人来Gulp 4已经很久了，就像重新开始一样！

Answer 1

更新17/04/2019

在分叉了本教程并更新了所有软件包之后，我可以使用此请求中列出的更改进行处理

https://github.com/PascalAOMS/gulp4-webpack/pull/1

原始帖子06/04/2019

我正在研究听起来很相似的教程（https://css-tricks.com/combine-webpack-gulp-4/，并且遇到了类似的问题-第一次遇到它抱怨的导入语句。

我创建了一个新的存储库，以使导入语句正常工作（暂时忽略webpack内容），并使其在this repository的this documentation中与@ babel / register一起工作。

我尝试使用--require标志将其放入节点脚本定义中，尽管它似乎并不喜欢（我会再摆弄一些），但是它对我有用吗

// package.json
{
  ...
  "scripts": {
    "use_import": "gulp --gulpfile tasks"
  },
  "author": "Marc Vousden",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/register": "^7.4.0",
    "@babel/preset-env": "^7.4.3"
    "gulp": "^4.0.0"
  }
}

// index.js
require('@babel/register');

const subtask = require('./subtask').default;

exports.default = (cb)=>{
  console.log("loaded index")
  subtask()
  cb()
}

在gulp文件的顶部（在我的情况下为任务/索引）使用require("@babel/register") 这应使babel处理其他require语句，以便导入起作用
使用require语句获取在其内部使用import语句的脚本似乎require语句返回的对象具有默认导出的键/值对，因此我必须在最后弹出.default。 >

我仍在处理所有问题，因此，如果我能使整个过程正常进行，我会进行更新，但现在可能会使您更进一步。

（也是-我完全忘记了在紧急情况下添加.babelrc文件）

Babel 7相当于babel-register？

1 个答案: