Как экспортировать пакет веб-пакетов как глобальный скрипт (не модуль)? - PullRequest
Новая
       2

Как экспортировать пакет веб-пакетов как глобальный скрипт (не модуль)?

3 голосов
/ 21 июня 2020

У меня есть 2 файла: a. js и b. js:

a. js: 

function hello() {
    alert('hey');
    alert('bye');
}

b. js: 

const name = 'Bob';
alert(name)

Я импортирую их оба в свой входной файл: 

import './a';
import './b';

Я хочу объединить их, мой webpack.config. js выглядит так: 

const path = require('path');

module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

Когда я запускаю webpack, я получаю модуль: 

// etc...

/***/ (function(module, exports) {

function hello() {
    alert('hey');
    alert('bye');
}

/***/ }),
/* 2 */
/***/ (function(module, exports) {

const name = 'Bob';
alert(name)

/***/ })
/******/ ]);

Вместо этого, как я могу просто получить: 

function hello() {
    alert('hey');
    alert('bye');
}

const name = 'Bob';
alert(name)

Этот плагин делает то, что я хочу достичь, но есть ошибка, из-за которой я не могу минимизировать объединенный файл, кроме того, я бы также хотел запустить babel, чтобы преобразовать код, чтобы он был совместим с es5. Все эти вещи, кажется, намного проще сделать обычным способом webpack, поэтому было бы здорово, если бы я мог просто заставить webpack экспортировать обычный скрипт вместо модуля ..

Ответы [ 2 ]

1 голос
/ 23 июня 2020

В итоге я использовал для этого gulp, это было довольно просто. Вот как выглядит мой gulpfile. js: 

const gulp = require('gulp');
const { watch } = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

const defaultTask = (cb) => {
  return gulp
    .src([
      'src/file1.js',
      'src/file2.js',
      'src/file3.js',
      // etc...
    ])
    .pipe(concat('bundle.min.js'))
    .pipe(
      babel({
        presets: ['@babel/preset-env']
      })
    )
    .pipe(terser())
    .pipe(gulp.dest('dist'));
  cb();
};

exports.default = defaultTask;

Это объединит, минимизирует и транспилирует es6 в es5 и сохранит вывод в dist/bundle.min.js как есть, без изменения скрипта в модуль.

0 голосов
/ 21 июня 2020

Вы можете сделать это, установив libraryTarget на var. Это по-прежнему будет выдавать код оболочки веб-пакета, но он будет оценивать вашу точку входа и назначать экспорт вашей точки входа переменной на основе значения library. 

module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'YourLibraryNameHere'
  }
};
...