создать скрипт с веб-пакетом, чтобы обернуть его как строку в переменную - PullRequest
Новая
       34

создать скрипт с веб-пакетом, чтобы обернуть его как строку в переменную

0 голосов
/ 05 июня 2019

У меня есть JS-скрипт, который я хочу «скопировать / вставить» в другой скрипт.Например, мой оригинальный сценарий:

index.js

function doSomethingWithData(data) {
  console.log(data)
}

function getData(url) {
  const xhr = window.XMLHttpRequest
  ? new XMLHttpRequest()
  : window.ActiveXObject && new window.ActiveXObject('Microsoft.XMLHTTP');
  xhr.open('GET', url, true);
  xhr.responseType = 'text';
  xhr.onload = () => {
    if (xhr.status === 200) {
      doSomethingWithData(JSON.parse(xhr.response).data)
    } else {
      console.warn('no data');
    }
  };
  xhr.send();
}

Я хочу создать из него пакет (уменьшенный и уменьшенный), и я хочу, чтобы содержимое этого пакета былобыть обернутым как строка в переменную.Это означает, что мне нужно добавить строку до, строку после и внутри пакета, мне нужно «экранировать escape-символы», т.е. заменить все «\» на «\», если таковые имеются.

bundle.js

const scriptToInject = `!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]);`

export default scriptToInject;

Итак, вот что я сделал с веб-паком:

webpack.config.js

const path = require('path');
const WrapperPlugin = require('wrapper-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode:'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  plugins: [
    new WrapperPlugin({
      test: /\.js$/,
      header: "const scriptsToInject = `",
      footer: "`;export default scriptsToInject",
      afterOptimization: true
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
             { search: '\\', replace: '\\\\', flags: 'g' },
          ]
        }
      },
    ],
  },
};

Но когда я использую этот string-replace-loader загрузчик, яесть эта ошибка: 

SyntaxError: Invalid regular expression: /\/: \ at end of pattern

И когда я решаю не использовать этот загрузчик, у меня нет ошибки, но результат явно не тот, что ожидается ... И иногда, с кодом, который я действительно использую (которыйэто не то, что выше), у меня есть другая ошибка: 

 ERROR in bundle.js from Terser
Unexpected token: atom (false) [bundle.js:132,72]

Что не так с моей конфигурацией webpack?

...