Импорт всех компонентов vue js в один файл

#javascript #vue.js #vuejs2

Вопрос:

Я хочу импортировать несколько компонентов Vuejs в устаревший проект.

В настоящее время я включил следующий скрипт в заголовок моего веб-сайта:

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

и файл компонента (я хотел бы разделить каждый компонент в другом файле)

 <script type="module" src="comp1.js"></script>
<script type="module" src="comp2.js"></script>

Это работает, но я хочу иметь один JS-файл, который будет импортировать все остальные компоненты, чтобы я мог указать на него в своем HTML в один JS-файл.

Есть идеи?

1. Добавьте пакет, т.Е. webpack, другого способа нет.

2. @Slim Я попытался «добавить» проект vue js в свою устаревшую кодовую базу, но он работает как SPA в пределах одного тега — <div id=app></div> . Мне нужно использовать компоненты внутри проекта vue.

3. Я понял ваш случай, и вам не нужно использовать vue-cli для настройки. Просто установите webpack и импортируйте все свои файлы в один файл с помощью import или require.context из webpack. Используйте webpack для компиляции их в один файл, на который должны быть ссылки в html.

Ответ №1:

Создайте папку для вашего пакета — frontend-dev например.

 $ cd frontend-dev
$ npm init

добавьте следующие зависимости

 "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  }

 $ npm install

Создайте webpack.config.js со следующими минимальными конфигурациями:

 let path = require('path');

module.exports = {

  output: {
      path: p('../public'), // where to create bundles files
      publicPath: '/public/', // public path to the created files
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },
};

/**
 * Path.resolve alias curried with current directory (__dirname)
 * as first parameter
 */
function p(){
  return path.resolve(__dirname, ...arguments)
}

В frontend-dev папке create src и index.js в ней:

 // index.js
import '../../comp1.js'
import '../../comp2.js'

Добавьте "build": "webpack" команду в раздел скрипты package.json и запускайте npm run build , чтобы увидеть вас bundled.js файл в указанном общедоступном каталоге.

Вы можете использовать require.context для импорта всех файлов в каталог, см. webpack docs .

1. Спасибо, в чем преимущество использования babel / webpack.config.js здесь? Мне удалось создать приложение, используя «сборку npx» без конфигурационного файла webpack.

2. Ну, webpack — это просто пример сборщика пакетов, который знает, как обращаться с импортом. Вы можете использовать тот, который вам больше всего нравится 🙂