Open
Description
Version
3.3.0
Reproduction link
https://github.com/lee-chase/test-lib
Environment info
Environment Info:
System:
OS: macOS 10.14.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 11.2.0 - ~/.nvm/versions/node/v11.2.0/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v11.2.0/bin/npm
Browsers:
Chrome: 71.0.3578.98
Firefox: Not Found
Safari: 12.0.2
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0-beta.2
@vue/babel-plugin-transform-vue-jsx: 1.0.0-beta.2
@vue/babel-preset-app: 3.3.0
@vue/babel-preset-jsx: 1.0.0-beta.2
@vue/babel-sugar-functional-vue: 1.0.0-beta.2
@vue/babel-sugar-inject-h: 1.0.0-beta.2
@vue/babel-sugar-v-model: 1.0.0-beta.2
@vue/babel-sugar-v-on: 1.0.0-beta.2
@vue/cli-overlay: 3.3.0
@vue/cli-plugin-babel: ^3.3.0 => 3.3.0
@vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
@vue/cli-service: ^3.3.0 => 3.3.0
@vue/cli-shared-utils: 3.3.0
@vue/component-compiler-utils: 2.5.0
@vue/preload-webpack-plugin: 1.1.0
@vue/web-component-wrapper: 1.2.0
babel-helper-vue-jsx-merge-props: 2.0.3
babel-plugin-transform-vue-jsx: 4.0.1
eslint-plugin-vue: ^5.0.0 => 5.1.0
vue: ^2.5.21 => 2.5.22
vue-eslint-parser: 4.0.3
vue-hot-reload-api: 2.3.1
vue-loader: 15.5.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.5.21 => 2.5.22
vue-template-es2015-compiler: 1.8.1
npmGlobalPackages:
@vue/cli: 3.3.0
Steps to reproduce
- Create a new project using Vue CLI, no need for router/vuex.
- Change to a library project
2.1. Change build to target lib with a hyphenated library name e.g.
"build": "vue-cli-service build --target lib --name test-lib ./src/main.js",
2.2. Add a suitable index file as an entry point to the component library. - build
What is expected?
dist/demo.html should be a valid sample web page. Ideally, this would be controllable by the developer to allow them to construct a valid template. Perhaps through use of public/index.html or a Vue template.
It may also be worth including current-script-polyfill as per the documentation for IE support.
<html>
<head>
<meta charset="utf-8" />
<title>ccv demo</title>
<script src="https://unpkg.com/vue@latest"></script>
<script src="./test-lib.umd.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/carbon-components@9.66.3/css/carbon-components.css"
/>
<link rel="stylesheet" href="./test-lib.css" />
</head>
<body>
<div id="app">Test</div>
<script>
Vue.use(window['test-lib'].default);
new Vue({
el: '#app',
template: '<HelloWorld />',
});
</script>
</body>
</html>What is actually happening?
An invalid demo.html file is produced that is not capable of demonstrating a component.
- Vue is not loaded
- Components are not registered
- The console.log fails due to the hyphenated library name.
- No reference to current-script-polyfill
<meta charset="utf-8">
<title>test-lib demo</title>
<script src="./test-lib.umd.js"></script>
<link rel="stylesheet" href="./test-lib.css">
<script>
console.log(test-lib)
</script>