babel.config.js：加载配置时出错 - 找不到模块"光纤"

Question

这让我抓狂。

IDE:Visual Studion 2019项目：创建了一个新的"Basic Vue.js项目"-我选择了*.ts口味的

我验证新网站的运行情况。确实如此。

在Vuetify上快速启动之后：https://vuetifyjs.com/en/getting-started/quick-start/#bootstrapping-vuetify对象

在每一个步骤之后，我都会验证网站仍然会编译和运行。

我到达了我们为项目添加新模块的部分。我运行这条线路：

npm install sass sass-loader fibers deepmerge -D

现在该网站将不会运行。当我调试时，我得到这个输出：

------ Build started: Project: MCCC.Web, Configuration: Debug Any CPU ------
> mccc.web@0.1.0 build C:LabsMCCCWebMCCC-WebMCCC.Web
> vue-cli-service build
-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
ERROR  Failed to compile with 1 errors5:04:50 PM
error  in ./src/main.ts
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
C:LabsMCCCWebMCCC-WebMCCC.Webbabel.config.js: Error while loading config - Cannot find module 'fibers'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:LabsMCCCWebMCCC-WebMCCC.Webbabel.config.js:17:32)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
@ multi ./src/main.ts
ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mccc.web@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mccc.web@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersDwainwright.BCAppDataRoamingnpm-cache_logs2020-04-26T21_04_50_521Z-debug.log
C:Program Files (x86)Microsoft Visual Studio2019ProfessionalMSBuildMicrosoftVisualStudiov16.0Node.js ToolsMicrosoft.NodejsToolsV2.targets(60,5): error MSB3073: The command "npm run build" exited with code 1.
Done building project "MCCC.Web.njsproj" -- FAILED.
Build FAILED.
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

最让我印象深刻的是：

C:LabsMCCCWebMCCC-WebMCCC.Webbabel.config.js: Error while loading config - Cannot find module 'fibers'

fibers是babel.config.json中的参考，我在其中添加了快速入门中列出的规则：

module.exports = {
presets: [
'@vue/app',
'@babel/preset-env'
],
rules: [
{
test: /.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
]
};

有人知道我该怎么解决吗？很乐意分享更多信息；不确定你还需要什么。

Answer 1

您使用的是最新版本的文档吗？我遵循了你提供的链接，锚#bootstrapping-the-vuetify-object似乎已经不存在了。我能够按照以下步骤成功地启动并运行一个基本项目：

1. vue create myapp：选择"自定义"并勾选所有框，对于TypeScript，选择默认的"类样式组件">
2. 验证npm run serve有效
3. vue add vuetify：选择"配置"，这些选项：
   1. Y(默认值(
   2. y
   3. y
   4. 材质设计图标(默认(
   5. N(默认值(
   6. Y(默认值(
   7. 英语(默认(
4. npm run serve会运行，但我收到了关于vuetify/lib的类型声明的警告。这个答案让我找到了这个常见问题解答项目，它使警告消失了。(您必须将"vuetify"添加到项目的根tsconfig.json中的compilerOptions.types数组中。(

FWIW，fibers似乎不再包含在项目中(在package-lock.json中搜索"光纤"(。我的babel.config.js文件看起来像：

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

vue.config.js看起来像：

module.exports = {
transpileDependencies: [
'vuetify'
]
}

希望这能有所帮助！