Используйте webpack для упаковки приложения koa2

Node.js задняя часть Webpack Babel

предисловие

Когда я использовал koa для написания сервера, публикация была кошмаром. Все файлы в src нужно перезаписать, и конфигурационный файл конфига тоже надо перезаписать.Если вы ненароком, о различных проблемах сообщат онлайн, а потом придется откатывать и подгонять локально и публиковать. Случайно наткнулся на статьюКак упаковать приложение koa с помощью веб-пакета, Удивительно, но оказывается, что и вебпак умеет упаковывать фон. Об этом никогда раньше не думали.

ключевой вопрос

Один: все модули в node_modules не упакованы

Основная функция веб-пакета состоит в том, чтобы ввести каждый модуль, на который ссылаются, в файл и унифицировать модульность модулей различных спецификаций (спецификация веб-пакета).

Однако узел содержит большое количество операций fs и path, после того как эти операции fs и path будут запакованы, объектов операции не будет, и будет выдаваться множество различных ошибок.

Таким образом, суть использования упаковки webpack заключается в том, чтобы отказаться от упаковки всех модулей в node_modules, а упаковать файлы, на которые ссылаются относительные пути, в один файл. Так уж получилось, что мы обнаружили, что webapck предоставляет атрибут externals для исключения модулей, которые не нужно упаковывать.

Углубившись, мы можем обнаружить, что такие модули, как webpack, nodemon и babel-preset-env, являются пакетами, от которых зависит среда разработки приложений, и наша программа вообще не потребует эти модули.

Подводя итог, мы можем обнаружить, что нам нужно только исключить все необходимые пакеты.Этот модуль соответствует модулю в зависимостях в package.json. Поймите разницу между зависимостями и devDependencies.

Поэтому мы можем использовать плагин externals-dependencies для работы со свойством externals для исключения зависимостей.

Код:

const webpack = require('webpack');
const _externals = require('externals-dependencies')
module.exports = {
    ...
    externals: _externals(),
    ...
}

Два: цель указывает на узел

Официальная документация: скомпилировано в среду, подобную Node.js (при использовании Node.js требуется загрузка фрагментов)

Код:

target: 'node',

Три: увеличить конфигурацию узла

Официальная документация: эти параметры определяют, следует ли полифиллировать или имитировать определенные глобальные переменные и модули Node.js. Это позволяет выполнять код, изначально написанный для среды Node.js, в других средах, например в браузерах.

Код:

node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
},

Четыре: конфигурация Babel

Чтобы быть совместимым с проблемой, что более ранние версии узла изначально не поддерживают async/await. Здесь я использую конфигурацию babel-preset-env{"modules": false}. Эта конфигурация преобразует синтаксис es6 в синтаксис es5, например, let и const в var.

В то же время все функции async/await также преобразуются в функцию _asyncToGenerator, определенную в полифилле.

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

На самом деле функция асинхронной функции реализована с помощью промиса.

Конечно, эта функция также нуждается в функции regeneratorRuntime во время выполнения. Поэтому я представил babel-polyfill глобально, чтобы обеспечить функцию regeneratorRuntime.

Примечание. Если ваша версия узла очень высокая и изначально поддерживает async/await, вы можете опустить babel-preset-env и babel-polyfill.

Код:

const path = require('path');
const webpack = require('webpack');
const _externals = require('externals-dependencies')

module.exports = {
    entry: {
        app: [
            // 如果polyfill放在这里，打包的时候将不会被external,必须在js里require才能有效external
            // 'babel-polyfill',
            './src/index.js'
        ]
    },
    output: {
        path: path.resolve(__dirname),
        filename: '[name].js'
    },
    resolve: {
        extensions: [".js"]
    },
    target: 'node',
    externals: _externals(),
    context: __dirname,
    node: {
        console: true,
        global: true,
        process: true,
        Buffer: true,
        __filename: true,
        __dirname: true,
        setImmediate: true,
        path: true
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"'
            }
        }),
    ]
}

развертывать

После упаковки деплоить гораздо удобнее, нужно только деплоить package.json, app.js и html в просмотре онлайн. а затем выполнить на сервере

1. npm install 
2. npm run for

Затем сервер работает в фоновом режиме. Если вам нужно обновить выпуск, вам нужно только повторно запустить npm run dev или npm run build, чтобы упаковать пакет локально и перетащить его на сервер, чтобы перезаписать app.js.

Адрес проекта строительных лесов

Категории