Question

我正在尝试根据材料组件Web的Getting Started Guide在我的Web应用程序中实现材料Web组件。

我能够成功设置Webpack（V3）来加载Web组件的SASS。这是在遇到包含路径问题之后。通过将此行添加到我的webpack.config.js中，可以解决此问题。

{
    loader: 'sass-loader',
    options: {
        includePaths: ['./node_modules']
    }
}

但是，我没有那么成功地编译JS。

有问题的组件是Material Web的Top App Bar。

在我的主要js文件中，我具有以下内容：

import {MDCTopAppBar} from './../../node_modules/@material/top-app-bar/index.js';
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

我最初将其表示为：

import {MDCTopAppBar} from './node_modules/@material/top-app-bar/index';

但是Webpack抱怨找不到该文件：

未找到模块：错误：无法解析'./node_modules/@material/top-app-bar/index'。

我尝试根据Webpack的Module.alias文档将此代码添加到我的webpack.config.js中，以解决该错误但无济于事（可能是我在实现中的错误）：

resolve: {
    alias: {
        MDCTopAppBar: path.resolve(__dirname, 'node_modules/@material/')
    }
}

A，代码可以编译，但是在Chrome的DevTools中，出现以下错误：

未捕获的TypeError：无法解析模块说明符“ @ material / base / component”。相对引用必须以“ /”、“./”或“ ../”开头。

此错误来自顶部应用栏的 index.js文件，该文件导入了许多其他组件：

import MDCTopAppBarAdapter from './adapter';
import MDCComponent from '@material/base/component';
import {MDCRipple} from '@material/ripple/index';
import {cssClasses, strings} from './constants';
import MDCTopAppBarBaseFoundation from './foundation';
import MDCFixedTopAppBarFoundation from './fixed/foundation';
import MDCShortTopAppBarFoundation from './short/foundation';
import MDCTopAppBarFoundation from './standard/foundation';

这是Top App Bar组件的文件结构的图片：

/node_modules
  /@material
    /base
    /ripple
    /top-app-bar
      -adapter.js
      -constants
      -index.js
/src
  -main.js

在top-app-bar/index.js中，我可以手动浏览此文件（以及我想包括的所有后续模块），并将所有路径重写为相对路径，但这是一种糟糕的方法。

如何配置Webpack自动解决这些相对路径？

我尝试在各种突变中使用resolve.modules，但没有成功：

resolve: {
     modules: [
        path.resolve(__dirname, 'node_modules/@material'),
        path.resolve(__dirname, 'node_modules/@material/base/'),
        path.resolve(__dirname, 'node_modules/@material/base/component'),
        path.resolve(__dirname, 'node_modules/@material/top-app-bar/'),
        'node_modules'
     ]
 }

这是我的项目依赖项：

"dependencies": {
    "@material/top-app-bar": "^0.40.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.0",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "grunt": "^1.0.3",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "node-sass": "^4.9.4",
    "postcss-loader": "^3.0.0",
    "sass": "^1.14.2",
    "sass-loader": "^7.1.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^2.11.3"
  }

我想我要么必须弄清楚我在配置webpack时出了什么问题，要么配置了babel-loader之类的包来整理路径，或者实现了类似于webpack的enhanced-resolve的自定义解决方案，但是只是万不得已。

提前谢谢！

配置Webpack解析相对路径

0 个答案: