日常工作中使用的都是现阶段比较流行的Vue组件库，如果自己写一个的话要怎么去写？
首先，还是需要脚手架搭建一个Vue项目
npm install vue-cli -g && vue init webpack vue-comps-project
在接下来的安装选项当中，选项随意. 项目名称尽量和目录名一致，版本号尽量从0.0.1开始，作者要和你在npm上注册的用户名一致。
附npm注册地址(请自行注册): https://www.npmjs.com/signup
cd vue-comps-project && npm install
vue-cli生成的目录结构如下图：
image.png
下面，打开package.json，在scripts里增加两条脚本命令：
"package:dev": "webpack --config build/package.dev.config.js",
"package:prod": "webpack --config build/package.prod.config.js",
"package": "npm run package:prod && npm publish && npm run build"
可以看的出，package:dev和package:prod如果被执行构建，则需要两个配置文件:package.dev.config.js和package.prod.config.js，那么就建立这两个文件就好了，接下来简单配置一下配置文件:
1、在build目录简历package.config.js，内容如下：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
'ydui': './src/packages/index.js'
},
output: {
path: path.resolve(__dirname, '../package'),
publicPath: '/package/',
library: 'ydui',
libraryTarget: 'umd',
umdNamedDefine: true
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
resolve: {
extensions: ['.js', '.vue']
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader',
sass: 'vue-style-loader!css-loader!sass-loader'
},
postLoaders: {
html: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'autoprefixer-loader'
]
}, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}
output中library改成你自己的名字即可，其他部分都是正常的输入、输出、loader等配置，不做赘述。
2、在build目录中建立package.dev.config.js，内容如下：
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/ydui.min.css')
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader','sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
extractScss
]
})
利用webpack-merge做两个配置文件的合并，这一块也没有什么不好理解的。
3、在build目录中简历package.prod.config.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const config = require('../config')
const baseWebpackConfig = require('./package.config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractScss = new ExtractTextPlugin('/ydui.min.css')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].min.js'
},
module: {
loaders: [{
test: /\.scss$/i,
loader: extractScss.extract(['css-loader','sass-loader'])
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
}
}
}),
extractScss,
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
new CopyWebpackPlugin([
// {output}/file.txt
{ from: `./src/packages`,to:`./packages`}
]),
]
})
配置文件基本上就配置好了，下面介绍一下几个特殊的文件：
1、.babelrc：编译es6的核心配置文件，通常使用stage-3或stage-2，1和0较少；
2、eslintrc.js: 顾名思义eslint配置文件，建议使用，养成良好代码风格;
3、.gitignore: git忽略文件的声明，避免同步到git仓库;
4、.npmignore: npm仓库的忽略文件的声明，避免发布到npm源上；
本次介绍暂时到这里，下一篇会继续说一下目录结构和如何书写第一个组件。
网友评论