javascript - 网络包 : How to convert variables on build

coder 2024-07-19 原文

关于使用 Vue (vue-loader) + Webpack 和 Chromatism

示例:(在开发/源代码上)

let textColor = chromatism.contrastRatio('#ffea00').cssrgb // => rgb(0,0,0)

是否可以告诉 Webpack 将转换为 rgb(0,0,0) build version？

因此在build version 上应该转换成如下内容:(为了性能)

let textColor = 'rgb(0,0,0)'

最佳答案

正如之前的回答和评论已经提到的，没有现成的 AOT 编译器来处理这种情况(我的意思是这是一个非常特殊的情况，没有通用工具能够处理它)，有没有什么可以阻止您推出自己的加载程序/插件来处理此任务!
您可以使用自定义 Webpack Loader和 Node's VM Module在构建时执行代码，获取其输出并将其替换为源文件中的函数调用。
这个想法的示例实现可能类似于以下代码片段:

// file: chromatismOptimizer.js

// node's vm module https://nodejs.org/api/vm.html
const vm = require('vm')

const chromatism = require('chromatism')

// a basic and largley incomplete regex to extract lines where chromatism is called
let regex = /^(.*)(chromatism\S*)(.*)$/

// create a Sandbox 
//https://nodejs.org/api/vm.html#vm_what_does_it_mean_to_contextify_an_object
// this is roughly equivalent to the global the context the script will execute in
let sandbox = {
  chromatism: chromatism
}

// now create an execution context for the script
let context = new vm.createContext(sandbox)

// export a webpack sync loader function
module.exports = function chromatismOptimizer(source){
  let compiled = source.split('\n').reduce((agg, line) => {
    let parsed = line.replace(regex, (ig, x, source, z) => {
      // parse and execute the script inside the context
      // return value is the result of execution
      // https://nodejs.org/api/vm.html#vm_script_runincontext_contextifiedsandbox_options
      let res = (new (vm.Script)(source)).runInContext(context)
      return `${x}'${res}'${z? z : ''}`
    })
    agg.push(parsed)
    return agg;
  }, []).join('\n');

  return compiled;
}

然后在您的 production.webpack.js(或类似的文件)中取自 this issue :

// Webpack config
resolveLoader: {
  alias: {
    'chromatism-optimizer': path.join(__dirname, './scripts/chromatism-optimizer'),
  },
}
// In module.rules
{
  test: /\.js$/,
  use: ['chromatism-optimizer'],
}

注意:这只是一个引用实现，并且大部分不完整。此处使用的正则表达式非常基础，可能无法涵盖许多其他用例，因此请确保更新正则表达式。此外，这一切都可以使用 webpack 插件来实现(只是我对如何创建插件没有足够的了解)。快速入门 refer to this wiki学习如何创建自定义插件。

基本思想很简单。

首先创建一个沙盒环境，
let sandbox = { chromatism:chromatism, ...}
然后创建一个执行上下文，
let context = new vm.createContext(sandbox)
然后对于每一个有效的源，在上下文中执行源语句并得到结果。
让结果 = (new (vm.Source)(source)).runInContext(context)
然后可能用结果替换原始源语句。

关于javascript - 网络包 : How to convert variables on build，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44759276/

有关javascript - 网络包 : How to convert variables on build的更多相关文章

ruby - 用 Ruby 编写一个简单的网络服务器 - 2
我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b
网络编程套接字 - 2
网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 检查网络文件是否存在，而不下载它？ - 2
是否可以在不实际下载文件的情况下检查文件是否存在？我有这么大的(~40mb)文件，例如:http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm这与ruby不严格相关，但如果发件人可以设置内容长度就好了。RestClient.get"http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm",headers:{"Content-Length"=>100} 最佳答案
ruby - 404 未找到，但可以从网络浏览器正常访问 - 2
我在这方面尝试了很多URL，在我遇到这个特定的之前，它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
深度学习12. CNN经典网络 VGG16 - 2
深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG
【网络】-- 网络基础 - 2
（本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。如：有三个人，每个人做的不同的事物，但是是需要协作的完成。而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据
常见网络安全产品汇总（私信发送思维导图） - 2
安全产品安全网关类防火墙Firewall防火墙防火墙主要用于边界安全防护的权限控制和安全域的划分。防火墙•信息安全的防护系统，依照特定的规则，允许或是限制传输的数据通过。防火墙是一个由软件和硬件设备组合而成，在内外网之间、专网与公网之间的界面上构成的保护屏障。下一代防火墙•下一代防火墙，NextGenerationFirewall，简称NGFirewall，是一款可以全面应对应用层威胁的高性能防火墙，提供网络层应用层一体化安全防护。生产厂家•联想网御、CheckPoint、深信服、网康、天融信、华为、H3C等防火墙部署部署于内、外网编辑额，用于权限访问控制和安全域划分。UTM统一威胁管理（Un
【Linux操作系统】——网络配置与SSH远程 - 2
Linux操作系统——网络配置与SSH远程安装完VMware与系统后，需要进行网络配置。第一个目标为进行SSH连接，可以从本机到VMware进行文件传送，首先需要进行网络配置。1.下载远程软件首先需要先下载安装一款远程软件：FinalShell或者xhell7FinalShellxhell7FinalShell下载：Windows下载http://www.hostbuf.com/downloads/finalshell_install.exemacOS下载http://www.hostbuf.com/downloads/finalshell_install.pkg2.配置CentOS网络安装好

javascript - 网络包 : How to convert variables on build

有关javascript - 网络包 : How to convert variables on build的更多相关文章

随机推荐