-
Notifications
You must be signed in to change notification settings - Fork 0
/
search_plus_index.json
1 lines (1 loc) · 15.8 KB
/
search_plus_index.json
1
{"./":{"url":"./","title":"vayne","keywords":"","body":"vayne Vayne 基于 vue-cli 的 webpack 构建工具, 五分钟开始你的项目 vayne 开始 安装 列子 使用 配置参数 插件 扩展 开发一个插件 迁移指南 教程 一些问题 vayne 只能使用 NPM 3 及其以上的版本安装 "},"docs/intro.html":{"url":"docs/intro.html","title":"安装","keywords":"","body":"安装 vayne 基于 vue-cli 的 webpack 全局安装的命令行工具, 全局安装依赖,可以省去每个项目安装开发依赖 的麻烦。同时以避免多个 项目需同时维护多个webpack 配置的痛苦, 同时会同步vue-cli 的 webpack 配置,当有新的配置时只需 升级vayne 即可享受。当然核心是无需在关心繁琐的webpack 配置。几分钟开始你的项目开发 安装须知 首先确保你安装Node 6.2.1 及 以上版本。这里推荐大家使用 nvm 来管理你的 node 版本。同时推荐大家使用 Yarn 来管理node 包依赖。当你安装完Node 后可以使用下面的方式 安装 vayne Npm 安装 国内的小伙伴可以使用cnpm 来安装哦 npm i vayne -g Yarn yarn add vayne -g 使用 vayne $ vayne -h Usage: vayne [options] Options: -V, --version output the version number -h, --help output usage information Commands: server 启动开发(调试)模式 build 生产模式,生成最终的部署代码 help [cmd] display help for [cmd] vayne server $ vayne server -h Usage: vayne server [options] 选项: -P, --port 服务端口号 [字符串] -H, --host host [字符串] -O, --openBrowser 是否打开浏览器 [布尔] [默认值: false] -C, --config 指定配置文件 [字符串] -h 显示帮助信息 [布尔] vayne build $ vayne build -h Usage: vayne server [options] 选项: -R, --report View the bundle analyzer report after build finishes [布尔] [默认值: false] -C, --config 指定配置文件 [字符串] -h 显示帮助信息 [布尔] "},"docs/example.html":{"url":"docs/example.html","title":"列子","keywords":"","body":"列子 一个Vue 项目 使用 vue-cli 来创建vayne template vue init vaynejs/webpack vayne-vue-demo 所需要配置 'use strict' module.exports = { entry: { app: './src/main.js' }, template: 'index.html', plugins: [ 'vayne-plugin-vue' ] } package.json 的内容 这里需说明的是为了更灵活的配置不同项目 所以babel 和eslint 的预设的使用的 外装。并未直接安装到 vayne 中 所以使用时需自己安装 以可以使用vayne 的插件 babel-preset-vayne 和 eslint-config-vayne { \"name\": \"vayne-vue-demo\", \"version\": \"1.0.0\", \"description\": \"A Vue.js project\", \"author\": \"阿平 \", \"private\": true, \"scripts\": { \"dev\": \"vayne server\", \"lint\": \"eslint --ext .js,.vue src\", \"build\": \"vayne build\" }, \"dependencies\": { \"vue\": \"^2.5.2\", \"vue-router\": \"^3.0.1\" }, \"devDependencies\": { \"autoprefixer\": \"^7.2.1\", \"babel-preset-vayne\": \"^1.0.2\", \"eslint-config-vayne\": \"^0.0.3\", \"vayne-plugin-vue\": \"^1.0.3\", \"vue-template-compiler\": \"^2.5.2\" }, \"engines\": { \"node\": \">= 4.0.0\", \"npm\": \">= 3.0.0\" }, \"browserslist\": [ \"> 1%\", \"last 2 versions\", \"not ie 启动 # yarn 指向淘宝镜像 yarn config set registry https://registry.npm.taobao.org -g # yarn node-sass 安装 yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g yarn install # 启动 vayne server # 打开浏览器 vayne server -O # build vayne build # View the bundle analyzer report after build finishes vayne build -R 依赖管理 当然,如果你担心别人使用你的项目也需要全局安装 vayne 并且无法精确的控制依赖的话,你也可以在项目里安装 vayne 那么 package.json 大致就是: { \"name\": \"vayne-vue-demo\", \"version\": \"1.0.0\", \"description\": \"A Vue.js project\", \"author\": \"阿平 \", \"private\": true, \"scripts\": { \"dev\": \"vayne server\", \"lint\": \"eslint --ext .js,.vue src\", \"build\": \"vayne build\" }, \"dependencies\": { \"vue\": \"^2.5.2\", \"vue-router\": \"^3.0.1\" }, \"devDependencies\": { \"vayne\": \"^0.0.23\", \"autoprefixer\": \"^7.2.1\", \"babel-preset-vayne\": \"^1.0.2\", \"eslint-config-vayne\": \"^0.0.3\", \"vayne-plugin-vue\": \"^1.0.3\", \"vue-template-compiler\": \"^2.5.2\" }, \"engines\": { \"node\": \">= 4.0.0\", \"npm\": \">= 3.0.0\" }, \"browserslist\": [ \"> 1%\", \"last 2 versions\", \"not ie "},"docs/config.html":{"url":"docs/config.html","title":"配置参数","keywords":"","body":"配置参数 vayne 包装了一些 webpack 的配置项 所提供的配置参数满足多数项目的基本需求 entry output template plugins externals alias extensions include urlLoaderLimit context vayne 的默认配置 dev.port dev.proxyTable build.assetsRoot build.assetsSubDirectory build.assetsPublicPath build.productionSourceMap entry 与 webpack 的 entry 一致,入口文件。接受 String|Array|Object 类型 默认 { app: './src/index.js' } output 与 webpack 的 output 一致 不过默认我已经处理了 所以无需配置 默认 { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath } template 模板入口 默认是 src/index.tpl plugins 通过引入 不同的插件 可以引入额外的配置和依赖 目前提供的插件 见 vaynejs 集合 插件文档见 plugins 默认直接 String|Function 类型 以可创建自己的插件来使用见 create plugins examples: 'use strict' const path = require('path') module.exports = { plugins: [ // require('./vayne.plugin.angular') 直接使用 'vayne-plugin-angularjs' // npm 使用 // 'angularjs' npm 简写使用 ], externals: { 'angular': 'angular', 'angular-ui-router': '\"ui.router\"', 'angular-animate': '\"ngAnimate\"', 'angular-aria': '\"ngAria\"', 'angular-material': '\"ngMaterial\"', 'jquery': 'jQuery' } } externals 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖 接受 String|Array|Object|Function|Regex 类型与 webpack 的 externals 一致 alias 创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:同 webpack resolve.alias 新加入的alias 和默认的alias 会累加 默认 { 'vue$': 'vue/dist/vue.esm.js', 'assets': paths.resolveApp('src/assets'), '@': paths.resolveApp('src'), '*': paths.appDirectory } extensions 自动解析确定的扩展。默认值为 ['.js', '.vue', '.json'] include babel-loader vue-loader 的 include 同webpack loader 的 include urlLoaderLimit url-loader Limit 属性 详见 url-loader options context 基础目录,绝对路径,用于从配置中解析入口起点(entry point)和 loader 同webpack config 默认是当前跟项目 vayne 的默认配置 vayne 的默认配置 'use strict' const path = require('path') const cwd = process.cwd() // 默认 vayne 配置 module.exports = { entry: { app: './src/index.js' }, dev: { env: { NODE_ENV: '\"development\"' }, // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { }, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 9000, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, // CSS Sourcemaps off by default because relative paths are \"buggy\" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: true }, build: { env: { NODE_ENV: '\"production\"' }, // Template for index.html index: path.resolve(cwd, 'dist/index.html'), // Paths assetsRoot: path.resolve(cwd, 'dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', /** * Source Maps */ devtool: '#source-map', bundleAnalyzerReport: false } } dev.port Specify the port for the dev server to listen to. dev.proxyTable 代理见 proxy build.assetsRoot Must be an absolute path on your local file system. This should point to the root directory that contains all the static assets for your app. For example, public/ for both Rails/Laravel. build.assetsSubDirectory Nest webpack-generated assets under this directory in build.assetsRoot, so that they are not mixed with other files you may have in build.assetsRoot. For example, if build.assetsRoot is /path/to/dist, and build.assetsSubDirectory is static, then all Webpack assets will be generated in path/to/dist/static .This directory will be cleaned before each build, so it should only contain assets generated by the build. Files inside static/ will be copied into this directory as-is during build. This means if you change this prefix, all your absolute URLs referencing files in static/ will also need to be changed. See Handling Static Assets for more details. build.assetsPublicPath This should be the URL path where your build.assetsRoot will be served from over HTTP. In most cases, this will be root (/). Only change this if your backend framework serves static assets with a path prefix. Internally, this is passed to Webpack as output.publicPath. build.productionSourceMap Whether to generate source maps for production build "},"docs/plugins.html":{"url":"docs/plugins.html","title":"插件","keywords":"","body":"插件 通用扩展不同的插件 我们可以引入不同的配置和依赖。来提供更丰富的功能 比如 用于开发 angularjs 目前提供的插件如下 Vue angularjs stylelint qiniu 预设 Vue Vue 提供Vue 相关配置 angularjs 用es6 的方式写 angularjs 详见 vayne 项目examples angularjs 提供angularjs 相关配置 stylelint stylelint css scss 格式强验证 stylelint 配置 https://stylelint.io/user-guide/node-api/#syntax qiniu 上传静态资源到 七牛云 CDN qiniu 七牛云上传 配置 在.vaynerc.js module.exports = { plugins: [ 'vayne-plugin-qiniu' // 获取简写 qiniu ], qiniu: { isDisable: false, // 是否禁用 某些情况下 需要禁用 cdn 设为true 则禁用上传 默认是false accessKey: 'AccessKey', // 七牛 AccessKey secretKey: 'secretKey', // 七牛 secretKey bucket: 'my-bucket', // 七牛存储对象名称 path: '[hash]', // 存储路径, 默认为 [hash] exclude: /index\\.html$/, // 可选,排除特定文件,正则表达式,默认 /index\\.html$/ include: /app\\.js$/, // 可选,指定要上传的文件,正则表达式,如: /app\\.js$/ batch: 20, // 批量上传文件并发数,默认 20 zone: 'Zone_z0' // 可选,存储在七牛的机房(华东 Zone_z0、华北 Zone_z1、华南 Zone_z2、北美 Zone_na0) }, build: { assetsPublicPath: '//xxx.域名.com/[hash]/' } } 预设 扩展了一些预设供大家使用 如 stylelint-config-vayne 使用 .stylelintrc { \"extends\": [ \"stylelint-config-vayne\" ] } eslint-config-vayne 使用 .eslintrc.js module.exports = { extends: [ 'eslint-config-vayne' ], rules: { } } babel-perset-vayne 使用 .babelrc { \"presets\": [ \"vayne\" ] } "},"docs/create-a-plugin.html":{"url":"docs/create-a-plugin.html","title":"开发一个插件","keywords":"","body":"开发一个插件 vayne 插件的本质是提供 loader plugins 配置和 依赖 不同插件扩展的配置应该是独立的,互不干扰。默认插件的是全局的 不管是生成环境还是开发环境的会使用插件的配置和依赖 之后会考虑提供新的接口 针对 开发环境和生成环境 一个插件如下 const _ = require('lodash') const StyleLintPlugin = require('stylelint-webpack-plugin') // 默认配置 const defaultOptions = { files: ['src/**/*.vue', 'src/**/*.scss'], syntax: 'scss' } /** * * vayne stylelint 插件 * @param {any} config vayne 配置 * @param {any} log vayne log * @param {any} utils vayne 工具库 * @returns webpack stylelint plugins */ class VaynePluginStyleLint { constructor(config, log) { log.debug('开始解析 vayne stylelint 插件') let styleLint = config.styleLint || {} let opts = _.defaultsDeep(defaultOptions, styleLint) if (styleLint.files) { opts.files = _.union(defaultOptions.files, styleLint.files) } log.debug(opts) this.name = 'VaynePluginStyleLint' return { plugins: [ new StyleLintPlugin(opts) ] } } } module.exports = VaynePluginStyleLint 规定 插件必须 定义 name 如 VaynePluginStyleLint 插件使用 vayne-plugin-* 命名 插件 必须返回 一个对象 如是webpack 插件返回plugins 如果是loader 则返回 loaders beforePlugins 在webpack 最开始插入插件 (这里的插件的是指webpack 插件) afterPlugins 在webpack 最后插入插件 可参考vayne-plugin-qiniu 配置 插件所需的配置 通过 config 返回命名以插件 名为准 如: vayne-plugin-styleLint 插件 配置在vayne 配置中写在 对象styleLint 中 如下 'use strict' module.exports = { plugins: [ 'vayne-plugin-vue', 'vayne-plugin-stylelint' ], styleLint: { files: ['scss/**/*.scss'], syntax: 'scss' }, dev: { showEslintErrorsInOverlay: true, proxyTable: { '/v2': { target: 'https://api.douban.com/', changeOrigin: true } } } } 依赖 所需依赖配置在 package.json 的 dependencies 内 { \"dependencies\": { \"stylelint-webpack-plugin\": \"^0.9.0\" } } 使用 最后可发布在npm 中 使用 npm 或者yarn 来安装使用 以可直接require 引入访问 如下 'use strict' const path = require('path') module.exports = { plugins: [ // require('./vayne.plugin.angular') 直接使用 'vayne-plugin-angularjs' // npm 使用 // 'angularjs' npm 简写使用 ], externals: { 'angular': 'angular', 'angular-ui-router': '\"ui.router\"', 'angular-animate': '\"ngAnimate\"', 'angular-aria': '\"ngAria\"', 'angular-material': '\"ngMaterial\"', 'jquery': 'jQuery' } } "},"docs/migration-guide.html":{"url":"docs/migration-guide.html","title":"迁移指南","keywords":"","body":"迁移指南 以vue cli 创建的项目举列 毕竟是基于它 开始 新建一个 .vaynerc.js 文件或者 .vaynerc 文件并添加基本配置 'use strict' module.exports = { entry: { app: './src/main.js' }, template: 'index.html', plugins: [ 'vayne-plugin-vue' ] } entry output (这个默认可以不设置因为的基本一样) 的是一样的直接copy 过来 别的一些配置见 template 指定到指定模板文件 loader vayne 中默认提供了 css, img postcss 各种预编译语言(less, scss, stylus) 的loader 的包含了不过预编译语言 需根据实际情况自行安装 额外的 vue 只需 安装 vayne-plugin-vue 就可使用 yarn add vayne-plugin-vue -D npm i vayne-plugin-vue -D 以及别的一些配置见 config.md 这里需要注意的是 所有的eslint 或者babel 预设的需自己安装 以可使用 vayne 提供的预设 见 plugins.md 最后执行 就可以咯 如有问题 请开issues 或者直接 联系我([email protected]) "},"docs/faq.html":{"url":"docs/faq.html","title":"一些问题","keywords":"","body":"一些问题 vayne 名字的由来 因为比较喜欢玩lol 其中玩的最多的就是薇恩 所以就有了这个名字, 希望像vayne 一样勇往直前 建议和反馈 因为的是个人想法 而造的轮子 如果有任何建议 或者想参与进来 请联系我的邮箱 [email protected] 或者微信 xiaopingdan007 请注明来意 当然 以欢迎聊天 是否会在生成环境中使用 目前逐步完善后会在 一些项目中验证,之后会在 我司所有项目中推。 最后如果喜欢 请给项目一个star "}}