将所有vue js组件导入单个文件

时间:2019-04-22 06:39:12

标签: 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 个答案:

答案 0 :(得分:0)

为捆绑程序创建一个文件夹-例如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中创建文件夹src和其中的index.js

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

"build": "webpack"的脚本部分中添加package.json命令并运行npm run build,以查看指定公共目录中的bundle.js文件。

您可以使用require.context来导入目录中的所有文件,请参见webpack docs