Informacje o użyciu vue (vue-loader) + webpack i Chromatyzm

Przykład: (na dev / Źródło)

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

Czy można powiedzieć webpack, aby przekonwertować do rgb(0,0,0) w wersji ?

Tak więc na Wersja budowy powinna zostać przekształcona coś w rodzaju: (dla wydajności )

let textColor = 'rgb(0,0,0)'
8
l2aelba 26 czerwiec 2017, 15:02

3 odpowiedzi

Najlepsza odpowiedź

Ponieważ poprzednie odpowiedzi i komentarze już wspomniały, że nie ma łatwo dostępnych kompilatorów AOT, aby poradzić sobie z tego rodzaju sytuacją (mam na myśli, że jest to bardzo konkretny przypadek i żadne narzędzie ogólnego przeznaczenia nie może być w stanie sobie z tym poradzić), nie ma nic cię powstrzymywać Od wyciągnięcia własnego ładowacza / wtyczki do obsługi tego zadania!
Możesz użyć niestandardowej Loader WebPack i Moduł Węzłowy wykonanie kodu w budynku, otrzymaj swoje wyjście i wymień go za pomocą połączenia funkcji w pliku źródłowym.
Przykładowa realizacja tego pomysłu może wyglądać jak następujący fragment:

// 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;
}

Następnie w twoim produkcja > Ten problem :

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

Uwaga: Jest to tylko implementacja referencyjna i jest w dużej mierze niekompletna. REGEX używany tutaj jest dość prosty i może nie obejmować wielu innych przypadków użycia, więc upewnij się, że zaktualizujesz regex. Również te wszystkie rzeczy można wdrożyć za pomocą wtyczek WebPack (po prostu nie mam wystarczającej wiedzy o tym, jak utworzyć jeden). Na szybki rozrusznik Odnoś się do tej wiki do nauki Jak utworzyć niestandardową wtyczkę.

Podstawowa idea jest prosta.

  1. Najpierw utwórz środowisko piaskowane,
    let sandbox = { chromatism:chromatism, ...}

  2. Następnie utwórz kontekst wykonania,
    let context = new vm.createContext(sandbox)

  3. Następnie dla każdego ważnego źródła wykonaj instrukcję źródłową w kontekście i uzyskać wynik.
    let result = (new (vm.Source)(source)).runInContext(context)

  4. Następnie może wymienić oryginalne oświadczenie źródła.

5
riyaz-ali 19 marzec 2018, 04:24

Stan Optimizer nie może obsługiwać arbitralnego wyrażenia. W takim przypadku najbardziej niezawodne rozwiązanie jest twardym kodu stałym w takim kodzie.

let textColor = process.env.NODE_ENV === 'production' ? 'rgb(0,0,0)' :  chromatism.contrastRatio('#ffea00').cssrgb;

Niektóre futurystyczne optymalizator ma takie sytuację. Prepack oceni kod w czasie kompilacji i wartości obliczeniowych. Nie jest jednak ogólnie uważany za gotowy do produkcji.

0
l2aelba 29 sierpień 2017, 10:09

Spróbuj użyć Call-Back Loader, aby przetworzyć cały swój JavaScript. Zdefiniuj funkcję wywołania zwrotnego dla tego konkretnego przypadku lub nawet czegoś bardziej ogólnego: evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }

1
Matjaž Drolc 30 sierpień 2017, 04:28