@roto/pack
House for developing and using freshes components.
Last updated a year ago by xiati .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @roto/pack 
SYNC missed versions from official npm registry.

Documentation

Usage

yarn add -D @freshes/house

Guide

Core files of house have:

  • src/Runners/DevelopmentRunner.js, to start development environment.
  • src/Runners/ProductionRunner.js, to build production environment.
  • src/Runners/ServerRunner.js, after building production, it will start a Express to set proxy and open web page for preview.

Development

Add new file ./script/development.js in project root path.

// ./script/development.js
import DevelopmentRunner from '@freshes/house/src/Runners/DevelopmentRunner.js'

new DevelopmentRunner()
  .setOptions(require('./configs/options'))
  // set proxy map by http-proxy-middleware
  .setProxy(require('./configs/proxy'))
  // set app browser env by webpack.DefinePlugin
  .setAppEnvs(require('./configs/appEnvs'))
  // extend webpack or express
  .extend(runner => {})
  // Finally run
  .run()

Then edit ./package.json

{
  "scripts": {
    "start": "node ./scripts/development.js"
  }
}

About runner.extend

runner has two built-in builder, they are webpackBuilder and expressBuilder.

new DevelopmentRunner().extend(runner => {
  // you can refer to api documentation, the documentation will be uploaded
  runner.webpackBuilder.xxx
  runner.expressBuilder.xxx
})

Sentry Hash

新增 VERSION_HASH 的环境的变量,默认取当前 git commit 的 hash 值。

webpack externals

新增webpack externals

externals: {
  vue: 'Vue',
  vuex: 'Vuex',
  'vue-router': 'VueRouter'
}

webpack 不会打包 external中的类库, 减少js bundle 体积 当你使用 import Vue from 'vue' 时, webpack会引入window.vue, 所以必须在template 即index.html中引入相关cdn example

<head>
  <script src=//static.34580.cn/cn/public/vue/2.5.3/vue.min.js></script>
  <script src=//static.34580.cn/cn/public/vue-router/3.0.0/vue-router.min.js></script>
  <script src=//static.34580.cn/cn/public/vuex/3.0.0/vuex.min.js></script>
</head>

使用externals 方法:

  1. 升级house yarn add @freshes/house@next

  2. 扩展runnerextend方法

const ProductionRunner = require('@freshes/house/src/Runners/ProductionRunner')

new ProductionRunner()
  .setOptions(require('./configs/options'))
  .setProxy(require('./configs/proxy'))
  .setAppEnvs({
    ...require('./configs/appEnvs'),
    NODE_ENV: 'production'
  })
  .extend(runner => {
    const config = runner.webpackBuilder.create() // webpack config
    const externals = {
      ...config.externals,
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter'
    }
    config.externals = externals
  }).run()

Current Tags

  • 1.0.2                                ...           latest (a year ago)

3 Versions

  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 3
This Month 6
Last Day 3
Last Week 3
Last Month 4
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |