Last active
May 6, 2021 22:56
-
-
Save renoirb/7305b8c767496934dc707525aa514b74 to your computer and use it in GitHub Desktop.
Vue Component Library Build
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
// Related to https://github.com/chrisvfritz/hello-vue-components/tree/v1.2.3/build-utils | |
// New file: build-utils/index.js | |
const fs = require('fs') | |
const { env, cwd } = process | |
const workspacePath = __dirname.substring(0, __dirname.length - 6) | |
const workspacePackagePath = Reflect.has(env, 'PWD') ? env.PWD : cwd() | |
function packageSlugOrExit(fileName) { | |
const filePath = workspacePackagePath + '/' + fileName | |
const moduleSlug = workspacePackagePath.substring(__dirname.length - 5) // Build is 5 characters offset from what we want. | |
// workspacePackagePath : /mnt/c/Users/renoir.boulanger/workspaces/context-frontend/frontend-bindings/repo/packages/vue-components-value | |
// __dirname : /mnt/c/Users/renoir.boulanger/workspaces/context-frontend/frontend-bindings/repo/build | |
// moduleSlug : packages/vue-components-value | |
let fileExists = false | |
try { | |
// https://nodejs.org/api/fs.html#fs_fs_access_path_mode_callback | |
const check = fs.accessSync(filePath, fs.constants.F_OK) | |
fileExists = check === undefined | |
} catch (e) { | |
const message = `Script cannot be run for this package, packageSlugOrExit(${fileName}) failed; | |
${e.message} | |
` | |
console.error(message) | |
process.exit(1) | |
} | |
return fileExists ? moduleSlug : fileExists | |
} | |
module.exports = { | |
packageSlugOrExit, | |
workspacePath, | |
workspacePackagePath, | |
} |
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
/** | |
* Vue Components Build Helpers: Get Components' library component names. | |
* | |
* Source: https://github.com/chrisvfritz/hello-vue-components/blob/v1.2.3/build-utils/update-index-file.js | |
*/ | |
const fs = require('fs') | |
const path = require('path') | |
const componentNames = require('./component-names') | |
const { packageSlugOrExit, workspacePackagePath } = require('.') | |
// packageSlugOrExit: Provided the file exists for this package, or exit | |
packageSlugOrExit('vue.config.js') | |
const libraryIndexFile = path.resolve(workspacePackagePath, 'src/index.js') | |
console.log(`Packaging:`) | |
console.log(' path:', workspacePackagePath) | |
console.log(` components:\n `, componentNames) | |
const indexFileContent = `\ | |
/** | |
* A Vue Components Package | |
* | |
* THIS FILE IS AUTOMATICALLY GENERATED | |
* YOU SHOULD NEVER UPDATE THIS FILE DIRECTLY | |
* | |
* Refer to {@link https://gitlab.private.example.org:50043/ProjectName/vue-components-value.git} | |
* | |
* build-utils/update-index-file.js | |
*/ | |
${componentNames | |
.map(componentName => `import ${componentName} from './${componentName}'`) | |
.join('\n')} | |
// Export components individually | |
export const components = { ${componentNames.map(componentName => componentName).join(', ')} } | |
// What should happen if the user installs the library as a plugin | |
export function install(Vue) { | |
${componentNames | |
.map(componentName => ` Vue.component('${componentName}', ${componentName})`) | |
.join('\n')} | |
} | |
// Export the library as a plugin | |
const plugin = { install, components, } | |
export default plugin | |
` | |
fs.writeFileSync(libraryIndexFile, indexFileContent) |
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
src=$(shell ls src/*.vue) | |
out=$(subst src,dist,$(subst .vue,,$(src))) | |
ifndef OUTPUT | |
OUTPUT = lib | |
endif | |
all: dist/index.js $(out) | |
clean: | |
rm -rI dist/ | |
node_modules: | |
yarn | |
dist: node_modules | |
yarn build | |
# If we do not make the src/index.js .PHONY, it wont get regenerated | |
.PHONY: src/index.js | |
src/index.js: node_modules | |
$(info Updating src/index.js) | |
node build-utils/update-index-file.js.js | |
dist/index.js: src/index.js | |
$(info Creating a Library to dist/ OUTPUT=$(OUTPUT)) | |
ifeq "$(OUTPUT)" "lib" | |
node_modules/.bin/vue-cli-service build src/index.js --target lib --name index --dest dist/ | |
endif | |
ifeq "$(OUTPUT)" "wc" | |
node_modules/.bin/vue-cli-service build --target wc --name index 'src/*.vue' | |
endif | |
ifeq "$(OUTPUT)" "wc-async" | |
node_modules/.bin/vue-cli-service build --target wc-async --name index 'src/*.vue' | |
endif | |
dist/%: src/index.js src/%.vue | |
$(info Creating a Vue Component for $<) | |
node_modules/.bin/vue-cli-service build $< --target lib --name index --dest $@/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Another script variant (scavenged not fully functional)
Components list
Say we have a
components/
folder, where each child areUBadge.vue
so we want to know names and path.Generated entry point
We want the file in
src/lib.js
to list all components automatically based on that list fromsrc/components/list.json
The "generate lib" script
here is a build script