0

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

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

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

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

但是，这意味着--require babel-register构建命令的部分不再起作用。让 Babel 7 编译我的 Gulp/Wepback 文件以便我可以继续使用import gulp from 'gulp'.

请原谅术语和解释不好，我一个人在 Gulp 4 中呆了这么久，就像重新开始一样！

4

1 回答 1

0

2019 年 17 月 4 日更新

在 fork 教程并更新所有包之后，我使用了此 pull request 中列出的更改

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

原帖 06/04/2019

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

我创建了一个新的存储库来让导入语句正常工作（暂时忽略 webpack 的东西），并让它们在这个存储库中使用 @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()
}
  • 在 gulpfile 的顶部（在我的情况下是任务/索引）使用require("@babel/register") 这应该使 babel 处理其他 require 语句，以便导入工作
  • 使用 require 语句来获取在其中使用 import 语句的脚本似乎 require 语句返回一个带有默认导出的键/值对的对象，所以我不得不在最后弹出 .default

我仍在处理事情，所以如果我让整个过程正常工作，我会更新，但现在它可能会让你走得更远一点。

（另外 - 我完全忘记在我的恐慌中添加一个 .babelrc 文件一段时间）

于 2019-04-16T15:17:03.200 回答