我正在制作一个小小的vuejs库,只是为了学习如何制作一个.我们称它为swing,这就是文件的结构.
conf /,dist /,test /文件为空
我已将此库推送到github并将其发布到npm.
我用它将它安装到我的应用程序中
npm install --save vuejs-swing
我可以看到它安装在package.json和node_modules文件夹中,但是当我这样做时:
import swing from 'vuejs-swing'
我收到此错误:
ERROR Failed to compile with 1 errors 11:42:41 AM
This dependency was not found:
* vuejs-swing in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/c
omponents/HelloWorld.vue
To install it, you can run: npm install --save vuejs-swing
它显然被安装,因此它必须是配置问题
这是我的webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
module: {
rules: [
// use babel-loader for js files
{ test: /\.js$/, use: 'babel-loader' },
// use vue-loader for .vue files
{ test: /\.vue$/, use: 'vue-loader' }
]
},
// default for pretty much every project
context: __dirname,
// specify your entry/main file
entry: {
app: './src/swing.js',
},
output: {
// specify your output directory...
path: path.resolve(__dirname, 'output'),
// and filename
filename: 'index.min.js'
},
resolve: {
// this is optional, but it lets you import .vue files without the .vue extension.
extensions: ['.js', '.json', '.vue']
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
编辑:
我会奖励那些可以提供工具的人,在npm发布包所需的配置,并能够使用它.
最佳答案 跟着这些步骤:
>确保git不会忽略您的输出文件夹(不应该在.gitignore文件中)
>构建生产包(运行Webpack)
>在你的package.json中将主文件指向./output/index.min.js而不指向./src/swing.js
{
"name": "vuejs-swing",
"version": "0.1.2",
"main": "./output/index.min.js",
// ...
}
除了你的软件包的用户为你构建源代码(运行Webpack)之外,你需要将它们指向预先打包的javascript文件.
作为旁注,包vuejs-swing目前还没有公开发布在npm上.我不知道您是否更改了包名称或在私有存储库上工作.