如何經過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'"
                        }
                    }
                ]
            }
        ]
    }
}
複製代碼