使用 Material Design 的 UI 组件 MDC Web

本文将介绍用于 Web 的 Material Design UI 组件 MDC Web .

来自 Google 的模块化且可定制的 Web 组件

关于本文的源代码,你可以直接从 Github 上下载

项目地址: MATERIAL DESIGN

用于 Web 的 Material 组件(MDC Web)可帮助开发人员使用 Material Design。这些组件由 Google 的核心工程师和用户体验设计师团队开发,以构建美观且功能强大的 Web 项目。

本文将使用 Sass 和 ES2015 ,介绍如何安装 MDC Web 节点模块,以及从 Webpack 配置中的那些 Node 模块中捆绑 Sass 和 JavaScript .

注意: 假设您已经在本地安装了 Node.jsnpm

第1步:使用 Sass 进行 Webpack

首先,运行 npm init 以创建 package.json 文件。完成后,将 start 属性添加到该 scripts部分。 打开 powershell 键入 npm init 根据命令行交互创建 package.json 创建之后将 start 修改成

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

您将需要所有这些Node依赖项:

  1. webpack:捆绑 Sass 和 JavaScript
  2. webpack-dev-server:开发服务器
  3. sass-loader:加载一个 Sass 文件并将其编译为 CSS
  4. node-sass:提供 Node.js 到 Sass 的绑定,对 sass-loader 的对等依赖
  5. css-loader:解析 CSS @import和url()路径
  6. extract-loader:将 CSS 提取到 .css 文件中
  7. file-loader:将 .css 文件作为公共 URL 提供 您可以通过如下命令来安装所有这些:
npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

注意:建议使用 webpack 3,还建议你使用 webpack-dev-server 2,因为它适用于 webpack 3。

如果你追求更激进的版本,需要使用 webpack4 请使用以下命令:

npm install --save-dev webpack@4 webpack-dev-server@3 css-loader sass-loader node-sass extract-loader file-loader

并安装 webpack-cli

npm i -D webpack-cli

为了演示 webpack 如何捆绑我们的 Sass ,你需要一个 index.html 。此 HTML 文件需要包含 CSSCSSsass-loader 生成,它将 Sass 文件编译为 CSS 。 .css 通过 extract-loader 提取到文件中。创建这个简单的 hello world :

创建 index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>Hello World</body>
</html>

然后创建一个 创建一个名为的 Sass 文件 app.scss

body {
    color: blue;
  }

然后配置 webpack 转换 app.scss 为 bundle.css。为此你需要一个新的名为 webpack.config.js 的 js 文件:

module.exports = [{
  entry: './app.scss',
  output: {
    // 这是编译 webpack 编译所必需的
    // 但是我们不使用 style-bundle.js 
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ]
      }
    ]
  },
}];

运行 npm start

npm start

第2步:为组件使用 CSS

现在你已经配置了 webpack 来将 Sass 编译成 CSS,让我们包含 Material Design 按钮的 Sass 文件。首先安装 Node 依赖项:

npm install @material/button

需要告诉我们 app.scss 导入 Sass 文件 @material/button 。我们也可以使用 Sass mixins 来自定义按钮,在 app.scss 上添加这段代码:

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

我们还需要配置 sass-loader 来了解 @materialMDC Web 的使用与导入。打开 webpack.config.js 更改 {loader: 'sass-loader'} 为如下:

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

注意:includePaths 对于大多数情况,配置应该足以满足所有 MDC Web 包一起保持最新的情况。如果由于嵌套 node_modules 目录而遇到编译 Sass 的问题,请参阅下面的 附录,了解如何配置自定义导入程序。

我们需要 autoprefixer 通过 PostCSS 进行配置。 您将需要所有这些Node依赖项:

  1. autoprefixer:解析 CSS 并为 CSS 规则添加供应商前缀
  2. postcss-loaderWebpack 的加载程序与 autoprefixer 一起使用 您可以通过运行此命令来安装所有这些:
npm install --save-dev autoprefixer postcss-loader

添加 autoprefixer 到你的 webpack.config.js 顶部 :

const  autoprefixer  =  require(' autoprefixer ');

然后添加 postcss-loader ,使用 autoprefixer 作为插件。打开 webpack.config.js 编辑:

{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
  loader: 'postcss-loader',
  options: {
     plugins: () => [autoprefixer()]
  }
},
{
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
},

使用 @material/button 的属性,需要编辑你的 index.html 以包含 MDC Button 的属性标记,并将 foo-button 该类添加到 clsss

<body>
  <button class="foo-button mdc-button">
    Button
  </button>
</body>

现在 npm start 再次运行并打开 http://localhost:8080 。你应该看到一个 Material Design 按钮!

Button

第3步:使用 ES2015 的 Webpack

我们需要配置 webpack 以通过 babel 将 ES2015 JavaScript 加入到 JavaScript 中。你将需要所有这些依赖项:

  1. babel-core
  2. babel-loader:使用babel编译JavaScript文件
  3. babel-preset-es2015:用于编译es2015的预设
  4. babel-plugin-transform-object-assign,用于IE 11支持 您可以通过运行此命令来安装所有这些:
npm install --save-dev babel-core@6 babel-loader@7 babel-preset-es2015 babel-plugin-transform-object-assign

为了演示 webpack如何捆绑我们的 JavaScript,您需要更新 index.html 以包含 JavaScriptJavaScript 文件由 babel-loader 生成,它将 ES2015 文件编译为 JavaScript 。将此脚本标记添加到 index.html 结束标记之前:

<script src = "bundle.js" async> </script>

<script src="bundle.js" async></script>

并创建一个简单的 ES2015 文件 app.js

console.log('hello world');

然后配置的 WebPack 转换 app.js 成 bundle.js 通过修改下列属性 webpack.config.js 的文件:

将条目更改为包含 app.scss 和的数组 app.js

entry: ['./app.scss', './app.js']

更改 output.filename 为 bundle.js

output: {
  filename: 'bundle.js',
}

在 babel-loader 对象之后将 sass-loader 对象添加到 rules 数组:

{
  test: /\.js$/,
  loader: 'babel-loader',
  query: {
    presets: ['es2015'],
    plugins: ['transform-object-assign']
  },
}

最终 webpack.config.js 文件应如下所示:

const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-object-assign']
        },
      }
    ],
  },
};

现在 npm start 再次运行并打开 http://localhost:8080 。您应该在控制台中看到 “hello world” 。

第4步:为组件使用 JavaScript

现在你已经配置了 webpack 来将 ES2015 编译成 JavaScript,让我们包含 Material Design中的 ES2015 文件。首先安装 Node 依赖项:

npm install --save-dev @material/ripple

我们需要告诉我们 app.js 导入 ES2015 文件 @material/ripple。我们还需要 MDCRipple 使用 DOM 元素初始化。打开 app.js 用这段代码替换你的 “hello world” 版本:

import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

现在 npm start 再次运行并打开http://localhost:8080。您应该会在按钮上看到 Material Design 纹波!

第5步:为生产环境构建

到目前为止,我们已经习惯 webpack-dev-server 使用实时更新来预览我们的工作。但是,webpack-dev-server 不适合生产使用。相反,我们应该生成让生产环境使用的资源。

在 package.json 添加脚本:

  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
  }

现在运行以下命令:

npm run build

这将产生 bundle.js 并 bundle.css 在项目目录中。这些包含已编译的 CSS 和已转换的 JS ,然后你可以将其复制到任何 Web 服务器目录中。

附录:为嵌套的 node_modules 配置 Sass 导入器

node_modules 如果您依赖于各个 MDC Web 包的冲突版本,则可能最终使用嵌套文件夹。当尝试使用 includePaths 上面显示的配置编译 Sass 时,这可能会导致错误,因为 Sass 只扫描 @material 顶级 node_modules 目录下的包。

或者,您可以按如下方式实现导入器,它使用节点的模块解析算法来查找最接近导入它的文件的依赖项。在您的 webpack.config.js (在之前 exports)顶部附近添加以下代码:

const path = require('path');

function tryResolve_(url, sourceFilename) {
  // 将 require.resolve 放在 try/catch 中,以避免 node-sass 失败并出现 libsass 错误
  try {
    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
  } catch (e) {
    return '';
  }
}

function tryResolveScss(url, sourceFilename) {
  // Support omission of .scss and leading _
  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
  return tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
      sourceFilename);
}

function materialImporter(url, prev) {
  if (url.startsWith('@material')) {
    const resolved = tryResolveScss(url, prev);
    return {file: resolved || url};
  }
  return {file: url};
}

然后将您的sass-loader配置更新为以下内容:

{
  loader: 'sass-loader',
  options: {
    importer: materialImporter
  },
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注