如何经过webpack 实如今 HTML,CSS, JS 中共享变量

时间 2019-12-28

标签如何经过 webpack 如今 html css 共享变量栏目 HTML 繁體版

原文原文链接

主要参考原文连接: www.freecodecamp.org/news/how-to…javascript

概述

项目中一般会须要统一设置样式或者根据某种状况来定 width 和 height, 如何实如今 HTML,CSS, JS 中都能访问到的所谓共享变量呢? 其实都归功于 webpackcss

做者在阅读了这篇文章以后发现了使用JS 操做 CSS 代价十分昂贵, 会减慢 react 应用的渲染, 主要缘由是在 react app 中, react-with-styles使用 runtime 的样式化后的组件会额外生成两个 Context.Consumer以及一个 Provider, 而这些额外的组件使得 CSS 能够监听到某些 JS 事件或者获取变量去更新样式html

而静态的 CSS 不会java

因此在少部分使用时还好, 可是若是是大规模使用, 好比在 table 中, 就会使得二者的性能差距变大. 可是呢, 谁不想用静态呢? 那不是产品经理有需求, 要动态的去更改啊.node

如下方案就是避免了一部分状况下的 JSTOCSS 但并非全部, 好比用户点击以后对 CSS 进行修改, 这时其实也尽可能少的更改 CSS , 而是给组件添加 className, 那样至少省去了 CSS 树的从新构建过程.react

设置 app

老样子webpack

yarn init -y
安装打包工具 webpackyarn add -D webpack webpack-cli
编辑 package.json 文件

{
    "script": {
        "build": "webpack"
    }
}
复制代码

建立 globals.js文件, 里面包含了咱们须要跨文件类型去获取的变量

module.exports = {
    myTitle: 'Hello dev.!',
    myColor: '#42ff87'
}
复制代码

建立 webpack.config.js打包配置文件

module.exports = {
    entry: __dirname + '/app/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
}
复制代码

建立一个 app文件夹, 包含 index.html, index.js.文件目录结构以下:

|-- node_modules/
|-- package.json
|-- webpack.config.js
|-- globals.js
|-- app/
	|-- index.html
	|-- index.js
复制代码

经过插件`html-webpack-plugin`渲染 html

先在 index.html中写些模板代码, 添加进变量 myTitlecss3

<html lang="en">
<head>
  <title>Webpack shared variables!</title>
</head>
<body>
  <h1><%= myTitle %></h1>
</body>
</html>
复制代码

安装`html-webpack-plugin`,

yarn add -D html-webpack-plugingit

配置 webpack

const HTMLWebpackPlugin = require('html-webpack-plugin')
const globals = require('./globals.js')

module.exports = {
    // 以前配置的 entry, output 等
    plugins: [
        new HTMLWebpackPlugin({
            template: 'app/index.html',
            templateParameters: globals // 这一步就是注入的变量, 会从这里面拿
        })
    ]
}
复制代码

执行yarn build就会发现生成的 index.html 中的 myTitle就被替换成了Hello dev.!. 其本质原理其实就是字符串模板.github

在 js 中使用变量

这是最基本的了.

import globals from '../globals.js'

document.write(
`<pre> ${JSON.stringify(globals, null, 2)} </pre>`
)
/** { "myTitle": "Hello dev.to !", "myColor": "#42ff87" } */
复制代码

CSS 中的变量

其实在 CSS 中是没法直接使用全局变量的, 须要用到 SASS. 不过浏览器不认识 sass 这个格式, 须要使用几个 loader, 将其转换成 css.yarn add -D sass-loader css-loader style-loader

在 app/style.scss中写如下内容, 注意咱们使用的是 scss 格式, 它与 sass 的惟一区别就是加不加括号

scss

h1 {
    color: $myColor
}
复制代码

sass

h1
    color: $myColor
复制代码

可是由于 scss 兼容全部 css3 以及自己就是 sass3 的新语法, 因此也支持 sass-loader, 因此在项目中通常都使用 scss

接下来须要将变量注入进去. sass-loader有一个prependData的属性, 不过接受的是一个字符串而不是变量的格式, 好比$myColor: red; myTitle: '...'

module.exports = {
    module: {
        rules: [
            {
                test: /\.s(ac)ss$/i,
                use: [
                    "style-loader", // 用于从 js 的字符串建立<style>DOM节点
                    "css-loader", // 将 css 转为 CommonJS
                    {
                        loader: "sass-loader", // 将 Sass 转为 CSS
                        options: {
                            prependData: "$myColor: '#42ff87'"
                        }
                    }
                ]
            }
        ]
    }
}
复制代码

若是像把 css 单独抽出来的话可使用 mini-css-extract-plugin, yarn add -D mini-css-extract-plugin安装以后, 将 style-loader 替换成该插件的 loader 便可

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.s(ac)ss$/i,
                use: [
                    MiniCssExtractPlugin.loader, // 用于从 js 的字符串建立<style>DOM节点
                    "css-loader", // 将 css 转为 CommonJS
                    {
                        loader: "sass-loader", // 将 Sass 转为 CSS
                        options: {
                            prependData: "$myColor: '#42ff87'"
                        }
                    }
                ]
            }
        ]
    }
}
复制代码