-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: new build system (styles separated)
- Loading branch information
1 parent
1b2dfd4
commit d901fd9
Showing
13 changed files
with
1,439 additions
and
305 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| module.exports = { | ||
| presets: [ | ||
| [ | ||
| '@babel/preset-env', | ||
| { | ||
| useBuiltIns: 'usage', | ||
| corejs: { | ||
| version: 3, | ||
| proposals: true | ||
| } | ||
| } | ||
| ] | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { join } from 'path' | ||
| import { DIST_DIR } from './constants' | ||
|
|
||
| export default () => [ | ||
| { | ||
| optimize: true, | ||
| output: { | ||
| file: join(DIST_DIR, 'bundle-umd.js'), | ||
| format: 'umd', | ||
| esModule: true | ||
| } | ||
| }, | ||
| // это отдельная сборка под ES модули | ||
| { | ||
| output: { | ||
| file: join(DIST_DIR, 'bundle-esm.js'), | ||
| format: 'esm', | ||
| esModule: true | ||
| } | ||
| }, | ||
| { | ||
| optimize: true, | ||
| output: { | ||
| file: join(DIST_DIR, 'bundle-cjs.js'), | ||
| format: 'cjs' | ||
| } | ||
| }, | ||
| { | ||
| optimize: true, | ||
| output: { | ||
| file: join(DIST_DIR, 'bundle-iife.js'), | ||
| format: 'iife' | ||
| } | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { join } from 'path' | ||
|
|
||
| export const ROOT_DIR = join(__dirname, '../') | ||
| export const SRC_DIR = join(ROOT_DIR, 'src') | ||
| export const STYLES_DIR = join(SRC_DIR, 'styles') | ||
| export const DIST_DIR = join(ROOT_DIR, 'dist') | ||
| export const IS_PRODUCTION = process.env.BUILD === 'production' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import postcssPresetEnv from 'postcss-preset-env' | ||
| import { join } from 'path' | ||
| import { DIST_DIR, STYLES_DIR } from './constants' | ||
| import postcss from 'postcss' | ||
| import * as fs from 'fs-extra' | ||
| import cssnano from 'cssnano' | ||
|
|
||
| const stylus = require('stylus') | ||
|
|
||
| export const postcssPlugins = [ | ||
| postcssPresetEnv, | ||
| cssnano | ||
| ] | ||
|
|
||
| export async function generateThemesCSS () { | ||
| return Promise.all([ | ||
| generateThemeCSS('themes/bootstrap.styl', 'themes/bootstrap.css'), | ||
| generateThemeCSS('themes/material-design.styl', 'themes/material-design.css') | ||
| ]) | ||
| } | ||
|
|
||
| async function generateThemeCSS (input, output) { | ||
| const inputAbsPath = join(STYLES_DIR, input) | ||
| const outputAbsPath = join(DIST_DIR, output) | ||
|
|
||
| const stylusContent = await fs.readFile(inputAbsPath, 'utf8') | ||
|
|
||
| // , { filename: 'nesting.css' } | ||
| const css = await new Promise((resolve, reject) => stylus.render(stylusContent, function (err, css) { | ||
| if (err) reject(err) | ||
|
|
||
| resolve(css) | ||
| })) | ||
|
|
||
| const result = await postcss(postcssPlugins).process(css, { | ||
| from: inputAbsPath, | ||
| to: outputAbsPath | ||
| // parser: sugarss | ||
| }) | ||
|
|
||
| await fs.ensureFile(outputAbsPath) | ||
| await fs.writeFile(outputAbsPath, result.css) | ||
|
|
||
| // console.log(outputAbsPath) | ||
| // if (result.map) { | ||
| // fs.writeFile('dest/app.css.map', result.map, () => true) | ||
| // } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import commonjs from 'rollup-plugin-commonjs' | ||
| import vue from 'rollup-plugin-vue' | ||
| import alias from 'rollup-plugin-alias' | ||
| import postcss from 'rollup-plugin-postcss' | ||
| import resolve from 'rollup-plugin-node-resolve' | ||
| import babel from 'rollup-plugin-babel' | ||
| import { join } from 'path' | ||
| import bundlesConfigs from './bundlesConfigs' | ||
| import { DIST_DIR, SRC_DIR, IS_PRODUCTION } from './constants' | ||
| import { postcssPlugins, generateThemesCSS } from './postcss' | ||
|
|
||
| export default Promise.all( | ||
| bundlesConfigs().map(getConfig) | ||
| ) | ||
|
|
||
| generateThemesCSS() | ||
|
|
||
| async function getConfig ({ | ||
| optimize = false, | ||
| output: { | ||
| file, | ||
| format, | ||
| name = undefined, | ||
| esModule = false | ||
| }, | ||
| plugins = [] | ||
| }) { | ||
| return { | ||
| input: join(SRC_DIR, 'main.js'), | ||
| output: { | ||
| esModule, | ||
| file, | ||
| format, | ||
| exports: 'named', | ||
| // используется в umd и в iife | ||
| name: 'vueCoolSelect', | ||
| globals: { | ||
| vue: 'Vue' | ||
| } | ||
| }, | ||
| // можно Object.keys(globals) | ||
| external: [ | ||
| 'vue' | ||
| ], | ||
| plugins: [ | ||
| alias({ | ||
| resolve: ['.ts', '.js', '.vue', '.styl'], | ||
| '~': SRC_DIR | ||
| }), | ||
| commonjs(), | ||
| resolve({ | ||
| customResolveOptions: { | ||
| moduleDirectory: 'node_modules' | ||
| } | ||
| }), | ||
| // транспилирует | ||
| babel({ | ||
| exclude: 'node_modules/**', | ||
| runtimeHelpers: true | ||
| }), | ||
| postcss({ | ||
| // TODO для каждого конфига генерируется свой main.css (одинаковый файл), исправить | ||
| extract: join(DIST_DIR, 'main.css'), | ||
| // minimize: true, Я использую cssnano самостоятельно (под капотом тоже cssnano) | ||
| plugins: postcssPlugins | ||
| }), | ||
| vue({ | ||
| // Inject CSS in JavaScript. Setting css: false would extract styles in a .css file. | ||
| css: false | ||
| }), | ||
| // оптимизация | ||
| optimize && IS_PRODUCTION && (await import('rollup-plugin-terser')).terser(), | ||
| ...plugins | ||
| ] | ||
| } | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,18 @@ | ||
| .IZ-select | ||
| * | ||
| box-sizing: border-box; | ||
| box-sizing: border-box | ||
|
|
||
| .IZ-select__input-wrap | ||
| display: flex; | ||
| align-items: center; | ||
| display: flex | ||
| align-items: center | ||
|
|
||
| .fade | ||
| &-leave-active | ||
| position: absolute; | ||
| position: absolute | ||
|
|
||
| &-enter-active, &-leave, &-leave-to | ||
| transition: opacity .2s; | ||
| transition: opacity .2s | ||
|
|
||
| &-enter, &-leave-to | ||
| opacity: 0; | ||
| opacity: 0 | ||
|
|
Oops, something went wrong.