Как импортировать внешний файл из корня проекта с помощью веб-пакета? - PullRequest
Новая
       41

Как импортировать внешний файл из корня проекта с помощью веб-пакета?

0 голосов
/ 18 января 2019

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

В моем пакете я использую webpack для компиляции сборки. Мое приложение использует response, который я извлекаю извне, поэтому пакет извлекается во время выполнения, а не упаковывается во время сборки.

webpack.config.js 

    module.exports = {
  entry: "./src/index.js",
  output: {...},
  module: {...},
  resolve: {
    modules: [path.resolve("./src"), path.resolve("./node_modules")],
    alias: {
      react: path.resolve(__dirname, "./node_modules/react"),
      "react-dom": path.resolve(__dirname, "./node_modules/react-dom")
    }
  },
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React"
    },

    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM"
    }
  }
};

Здесь, в externals, вы видите, что я исключаю react и react-dom из сборки.

Теперь мне нужен способ импортировать обычный файл settings.js из корня проекта, а не импортировать библиотеку из node_modules. Есть ли в вебпаке такая возможность?

До сих пор я пытался использовать externals для его импорта следующим образом: 

externals: {
    react: {...},
    "react-dom": {...},
    "settings": { commonjs: "settings.js" }
  }

Я знаю, что это неправильно, но есть ли что-то похожее, что я могу сделать, чтобы импортировать внешний файл .js во время выполнения из каталога проекта?

1 Ответ

0 голосов
/ 18 января 2019

Я бы посоветовал вам связывать, а не пытаться импортировать вещи во время выполнения. Webpack - это пакет. Ситуация становится беспорядочной, когда вы пытаетесь обойти то, для чего она предназначена.

И да, вы можете импортировать файлы вне корневого каталога в ваш пакет. Вот пример из одного из моих приложений, который использует внешний код. 

{
    test: /\.js?$/,
    include: [
      path.resolve(__dirname),
      path.resolve(__dirname, "../Public/js/src/common")
    ],
    exclude: /node_modules/,
    loader: "babel-loader"
  }

Я также создаю псевдоним. 

      common: path.resolve(__dirname, "../Public/js/src/common"),

Webpack связывает этот файл с вашим приложением при его импорте.

...