我通过 vue-cli 制作我的项目。
vue init webpack vue-demo
cd vue-demo
npm install
npm run dev
现在我想开发一些组件。我想在requirejs中使用它们。网络包配置
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js',
libraryTarget: 'umd',
library:'senyint'
}
Q1:生成三个文件.app.js清单.js供应商.js该演示有一个 你好.vue .我想通过 webpack 生成什么来要求 js 文件。但我需要他们,这是不可抗拒的。为什么?怎么了?我应该在哪里出口?现在我主要出口.js像这样。
import Hello from 'components/Hello'
module.exports = {
Hello
}
Q2:I不想在没有 Vue 的情况下打包。所以我配置这个
externals: {
vue: 'vue'
}
如果我这样做,当 npm 运行开发显示错误"未捕获的类型错误:无法读取未定义的属性'配置'"它导致找不到 Vue。如果我配置外部 vue 如何让它运行?
Q1:打开javascript文件应用程序.js我发现
define("senyint", ["vue"], factory);
在这一行。'senyint' 是一个包名,webpack 生成 js,但它不起作用。我像这样修改代码
define(["vue"], factory);
需要它并且它有效。但我不知道为什么...我只是可以解决这个问题;主要.js 导出 .vue 组件
import Hello from 'components/Hello.vue'
export const scom = {
Hello
}
requirejs config
requirejs.config({
baseUrl: 'js/common',
paths: {
module: '../modules'
},
shim: {
app: {
deps:['vue','manifest','vendor']
}
}
})
requirejs(['module/demo', 'app'], function (demojs, app) {
debugger
console.log(app)
})
问2:我使用 vue-cli webpack 模板构建了我的项目。(不是简单的网络包)在构建目录中有'webpack.base.conf.js'和'webpack.prod.conf.js修改 webpack.prod.conf.js
添加externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
并且不要在'webpack.base.conf.js'中添加代码。然后 npm 运行构建它将在没有 vue 的情况下打包.js .Npm run dev 使用 webpack.base.conf.js ,它将与 vue 一起运行