Question

我通过vue-cli制作我的项目。

vue init webpack vue-demo
cd vue-demo
npm install 
npm run dev

现在我想开发一些组件。我想在requirejs中使用它们。 webpack config

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 manifest.js vendor.js 该演示有一个Hello.vue。我想要通过webpack生成的js文件。但我要求他们，这是不可取的。为什么？怎么了？我应该在哪里出口？现在我像这样导出main.js。

import Hello from 'components/Hello'
   module.exports = {
Hello
}

Q2：我不想在没有vue的情况下打包。所以我配置这个

externals: {
    vue: 'vue'
}

如果我这样做，当npm run dev显示错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; config＆＃39;未定义＆＃34; 它导致无法找到Vue。如果我配置externals vue如何让它运行？

Answer 1

Q1：打开我发现的javascript文件app.js

define("senyint", ["vue"], factory);

在这一行。 'senyint'是包名，webpack生成js，但它不起作用。我像这样修改代码

define(["vue"], factory);

需要它并且它有效。但我不知道为什么......我只能解决这个问题; main.js export .vue components

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)
})

Q2：我使用vue-cli webpack模板构建了我的项目。（不是webpack-simple）在build目录中有'webpack.base.conf.js'和'webpack.prod.conf.js' 修改webpack.prod.conf.js add

externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },

并且不要在'webpack.base.conf.js'中添加代码。然后npm运行构建它将打包而不用vue.js .Npm运行dev使用webpack.base.conf.js，它将运行vue

如何要求webpack使用requirejs生成js文件？我使用vue-cli

1 个答案: