前端开发者学堂 - fedev.cn

开始CSS模块

发布于 大漠

本文转载自:众成翻译 译者:@Yawenina 链接:http://www.zcfy.cc/article/1011 原文:https://css-tricks.com/css-modules-part-2-getting-started/

这里不止一种方法来让CSS模块与JavaScript模板、CSS文件或者构建步骤运行起来。这篇文章作为CSS模块系列文章的一部分,我们学习一种方法。本文的目的就是开始一个CSS模块项目并且运行起来。

系列文章

在这个项目中,要求CSS决不能依赖客户端JavaScript运行,所以构建步骤需要在部署之前将所有东西处理成可运行的HTML和CSS。我们将使用Webpack,一款构建系统和模块打包工具。在下一篇文章中我们将集中使代码处于一个渲染静态HTML的浏览器的真实的项目中。

开始吧!

安装Webpack

安装NPM和node 以后,我们需要在某处创建一个文件夹并且运行以下代码:

npm init --y

这将创建一个充满一系列默认值的package.json文件。这是我们的依赖清单——当别人npm install这个项目时需要下载和安装的依赖的指示。

Webpack 将处理我们的构建过程。它将在我们写代码的过程中监测我们的CSS,JavaScript,HTML以及执行。但是什么是Webpack? Maxime Fabre认为Webpack是一款构建系统和模块打包工具:

嗯,这两者都和我的意思,这不是我的意思,我的意思是,它结合了这两种。Webpack并没有建立自己的资源,然后分别打包你的模块,它认为你的资源是模块本身...它们能够被引入、修改、操作并且最终能够打包到你的最终文件。

如果这听起来很奇怪,不要担心。记得曾经Sass、Gulp、npm曾经都那么陌生和可怕吗?我们稍后将解决它。

让我们确信Webpack通过一个JavaScript文件定义代码的依赖关系,因此我们能够引入代码块来实现正确的“打包”。首先我们需要在全局安装Webpack,这让我们能够在我们的终端运行webpack命令:

npm install webpack -g

一旦这个完成,我们需要在我们项目的本地安装Webpack,像这样:

npm i -D webpack

现在我们需要在/src文件夹下新建一个index.js文件。通常我喜欢创建一个文件夹来存放静态资源(比如图片、字体、CSS文件和标记)。我写的代码一般都在/src文件夹下,同时那些在过程中通过机器或者编译的代码存放在/build文件夹下。我认为删除/build文件夹是完全没有问题也不会遭受任何痛苦的,因为我们完全可以运行命令行代码,它将处理/src文件夹内的东西并且再一次将它完全的重建为/build文件夹。在这种情况下,我们希望Webpack查看/src下的所有东西,执行某一过程,随后将结果的代码放入/build

/src文件夹内我们新建一个空的alert.js文件(我们随后将回看它。)我们将需要在项目的根目录,/src文件夹外创建一个webpack.config.js文件,因此我们的项目结构是这样的:

package.json 
webpack.config.js 
/node_modules 
/src
    index.js 
    alert.js

webpack.config.js文件(Webpack配置文件)内,我们需要加入以下代码:

module.exports =  { 
    entry:  './src', 
    output:  { 
        path:  'build', 
        filename:  'bundle.js',  
    },  
};

每当我们运行webpack命令时,Webpack将查看/src中的所有资源建立一个依赖关系树。

返回我们的src/index.js文件中添加以下代码:

require("./alert.js");

并且在alert.js文件中写入:

alert("LOUD NOISES");

现在在我们的根目录再创建一个index.html文件,并且在<body>关闭标签前加入script标签引入我们打包的文件:

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8"> 
        <title>Document name</title> 
    </head>  
    <body>  
        <h1>CSS Modules demo</h1>  
        <script src="build/bundle.js"></script>  
    </body>  
</html>

bundle.js就是Webpack将要生成的文件。要生成它我们需要运行webpack命令。为了让我们更方便的使用它,我们需要在package.json文件中更新scripts。我们需要在package.json文件中找到它:

"scripts":  { 
    "test":  "echo 'Error: no test specified' && exit 1"  
},

这是npm默认给我们的,但是我们可以使用以下的代码替换它,并且让我们的命令行脚本为我们运行Webpack以及打开一个浏览器窗口:

"scripts":  {  
    "start":  "webpack && open index.html"  
},

所以无论何时当我们运行npm start时我们将自动运行webpack命令以及在浏览器打开我们的index文件。让我们现在来运行一下,看看发生了什么。

CSS Modules

运行成功了!这证明了我们的index.js文件从alert.js文件中引入了它,并且Webpack正确的打包了一切。如果我们现在删除alert.js文件,我们将在再一次运行npm start时发现一个错误:

CSS Modules

这个错误将在Webpack未能找到引入的模块时出现。但现在,我们已经证实,我们运行的都可以完成。现在我们可以在我们的index.js中取消require,开始学习Webpack的下一步。

添加我们的第一个加载器(Loader)

Webpack中的加载器非常重要。MaxIME Fabre在这方面有他的看法:

加载器基本上是一种“当你遇到这种类型的文件时,使用这个loader加载它”的一种小型插件。

在Maxime的教程中他添加了Babel Loader,这真是一个很好的开始,因为Babel允许我们使用ES2015以及JavaScript语言的最新改进。所以,代替我们之前使用的Common.js的require函数,我们现在可以使用import。通过Babel,我们也可以使用classes(类),arrow functions(箭头函数)以及一系列其他很酷的特性:

Babel这类工具允许我们在现在就书写新的ES2015代码,并且执行一个称为转译(和预处理比较像)的任务来将代码转换为能得到浏览器很好的支持的早一些的JavaScript版本。这与Sass很像;最初使用Sass语法写代码,随后使用预处理器编译为标准的CSS。

下面的代码将安装Webpack babel loader 以及我们运行Babel需要的依赖:

npm i -D babel-loader babel-core babel-preset-es2015

在根目录下的.babelrc文件中我们可以配置预设值让其他人知道我们将使用哪种JavaScript语法:

{  
    "presets":  ["es2015"] 
}

现在我们想要Babel运行在那些我们写的.js文件上,那些我们随后安装的依赖有他们自己的语法,我们并不想弄乱它们。这时我们就需要Webpack。我们可以打开webpack.config.js文件并且用以下代码替换它:

module.exports =  { 
    entry:  './src',
    output:  { 
        path:  'build', 
        filename:  'bundle.js',  
    }, 
    module:  { 
        loaders:  [  
            { test:  /\.js/, loader:  'babel', include: __dirname +  '/src',  }  
        ], 
    } 
};

loaders数组中的test键值对告诉Webpack在什么类型的文件上操作。同时include明确告诉Webpack我们想要在项目的什么地方进行操作。

让我们测试一下Babel和Webpack一起工作。在一个新的文件(src/robot.js)中,我们写入以下代码:

const greetings =  (text, person)  =>  {  
    return  `${text}, ${person}. I read you but I’m sorry, I’m afraid I can’t do that.`; 
}  
export  default greetings;

这个JavaScript文件用了一系列ES2015的新特性,比如export,constlet,箭头函数,模板字符串。

现在我们可以import那个模块到我们的src/index.js文件,像这样:

import greetings from  './robot.js'
document.write(greetings("Affirmative",  "Dave"));

最后,我们所需要做的就是再次运行npm start,我们的浏览器应该弹出一段文字:“Affirmative, Dave. I read you but I’m sorry, I’m afraid I can’t do that.”。这就证实了Babel正如它应该的工作了。

加油!尽管我们只差一步了,但目前它还不是一个CSS模块。但是在我们继续之前,让我们删除src/robot.js以及src/index.js中的代码。

加载样式

现在我们几乎让我们的模板工作了,我们将需要再添加两个loaders, css-loaderstyle-loader,我们将安装:

npm i -D css-loader style-loader

css-loader查看CSS文件的所有依赖,style-loader将这些样式直接嵌入到标记中。让我们在src/app.css中写些代码来测试:

.element { 
    background-color: blue;  
    color: white;  font-size:  20px;  
    padding:  20px; 
}

随后我们在src/index.jsimport这个样式表。

import styles from  './app.css'  
let element =  ` 
    <div class="element"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur laudantium recusandae itaque libero velit minus ex reiciendis veniam. Eligendi modi sint delectus beatae nemo provident ratione maiores, voluptatibus a tempore!</p> </div> `
document.write(element);

坚持住!我们刚才将一个样式表作为JavaScript文件的依赖了吗?当然咯!但是在它正确运行以及我们知道它为什么有用之前,我们首先需要再次配置webpack.config.js

module.exports =  { 
    entry:  './src', 
    output:  { 
        path:  'build', 
        filename:  'bundle.js',  
    }, 
    module:  { 
        loaders:  [  
            { test:  /\.js/, loader:  'babel', include: __dirname +  '/src',  },  
            { test:  /\.css/, loaders:  ['style',  'css'], include: __dirname +  '/src'  }  
        ],  
    } 
};

运行npm start将看到:

CSS Modules

这样,如果我们"Inspect Element"我们的文档,我们将发现style-loader将那个文件放入<style>标签中嵌入到了文档的<head>标签中:

CSS Modules

让我们来盘点刚才发生的事情。我们在JavaScript文件中引入了另一个CSS文件,并且那些代码被嵌入到了网页中。所以在一个更现实的例子中,我们新建一个buttons.js文件并且依赖于buttons.css,随后将该JavaScript文件引入另一个组织我们模板和一些HTML的文件中。这会使我们的代码模块化和易于阅读!

个人来说,为了保持整洁,我倾向于有一个单独的CSS文件而不是把代码都写在一行。为了实现它,我们需要用一个名为extract textWebpack插件

将每一个入口引入('style.css')的文件移动到一个单独产出的CSS文件。所以你的样式不再嵌入在JavaScript中,而是在一个单独的CSS块文件中(styles.css)。如果你的所有样式表体积很大,这将非常快,因为加载打包的样式表与JavaScript打包文件平行。

我们需要用npm安装它:

npm i -D extract-text-webpack-plugin

现在我们再一次更新webpack.config.js来引入它和我们的css loader:

var ExtractTextPlugin =  require('extract-text-webpack-plugin'); 
module.exports =  { 
    entry:  './src',
    output:  { 
        path:  'build',
        filename:  'bundle.js',  
    }, 
    module:  { 
        loaders:  [  
            { test:  /\.js/, loader:  'babel', include: __dirname +  '/src',  },
            { test:  /\.css/, loader: ExtractTextPlugin.extract("css")  }  
        ],  
    }, 
    plugins:  [  
        new  ExtractTextPlugin("styles.css")  
    ] 
};

ExtractTextPlugin现在将为我们新建一个styles.css文件!

你可能已经注意到我们已经完全移除了style-loader,因为我们不想这些样式再被注入到我们的标记中。所以,如果我们现在打开/build文件夹,我们可以看到styles.css被创建,并且我们所有的代码都在里面。现在我们可以在index.html<head>部分引入我们样式表:

<link  rel="stylesheet"  href="build/styles.css">

再次运行npm start —— 我们的样式已经神奇的展现在它所属于的页面了。

现在我们的CSS和HTML已经在页面起作用了,我们要怎么操作类名才能获得当前作用域的好处?我们需要像下面这样更新webpack.config.js

{ 
    test:  /\.css/, 
    loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),  
}

这将在类名的最后生成字符。这就是CSS模块的真正所在,通过Webpack的CSSloader,hash值改变了类名。

接下来,我们用styles.element类更新index.js:

import styles from  './app.css'  
let element =  ` 
    <div class="${styles.element}"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur laudantium recusandae itaque libero velit minus ex reiciendis veniam. Eligendi modi sint delectus beatae nemo provident ratione maiores, voluptatibus a tempore!</p> 			</div> ` 
document.write(element);

看一下发生了什么!再次运行npm start,我们的代码已经被Webpack处理,当前作用域已经不再是问题了,因为我们的类像下面这样注入到了网页中:

<div class="app__element___1MmQg"> ... </div>

我们并没有结束,因为还有很多问题没有得到解答。我们怎样在开发环境中像这样写代码?我们怎样绕过使用document.write将标记注入到页面中?我们怎样构建我们的模块和文件?开始CSS模块并让它运行起来只完成了一半,下一步,我们必须考虑如何从另一个系统中将代码转换成这样。

在下一篇教程中,我们将学习React怎样帮助我们生成干净简练的模块,同时我们也会学习如何将很多的模板生成静态标记以及如何添加入Sass和PostCSS这样的新特性到我们的项目中。View products by sport