我想将多个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文件。
任何的想法?
为您的捆绑包创建一个文件夹 - 例如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"
的scripts部分中添加package.json
命令并运行npm run build
以在指定的公共目录中查看bundled.js文件。
您可以使用require.context
导入目录中的所有文件,请参阅webpack docs。