Как использовать библиотеку js, созданную с помощью веб-пакета, на простой html-странице - PullRequest
Новая
       3

Как использовать библиотеку js, созданную с помощью веб-пакета, на простой html-странице

1 голос
/ 12 апреля 2019

Итак, я создал библиотеку javascript, используя следующий начальный проект https://github.com/a-tarasyuk/webpack-typescript-babel,, в котором используются webpack, typcript и babel.

Я изменяю конфигурацию веб-пакета для создания библиотеки с использованием UMD, чтобы я мог использовать библиотеку в браузере и на сервере. 

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src'),

  output: {
    filename: 'index.js',

    path: path.resolve(__dirname, 'lib'),

    library: 'mylib',
    libraryTarget: 'umd',
    globalObject: `(typeof self !== 'undefined' ? self : this)`,
    umdNamedDefine: true,
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
  },

  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new CleanWebpackPlugin()
  ]
};

Затем, когда я собираю библиотеку, у меня есть индекс.Файл js в каталоге lib

Когда я помещаю index.js в простой HTML.как я могу использовать класс Value в проекте?Я попробовал следующее, но выдает Uncaught ReferenceError: Значение не определено 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="index.js">
    </script>

    <script>
      var val = new Value();
    </script>
  </body>
</html>

Спасибо

1 Ответ

1 голос
/ 12 апреля 2019

Я нашел решение, но я не уверен, что это ожидаемое поведение. Когда я проверял объект окна, следующий код работает 

    <script>
      var p = new window.mylib.Value();
      p.setValue(1000);
      console.log(p.getValue());
    </script>

Итак, я полагаю, веб-пакет добавляет библиотеку к объекту окна при запуске в браузере?

UPDATE:

Я думаю, это потому, что для globalObject установлено значение this, которое будет монтировать библиотеку в окне в браузере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...