Как создать один файл с полизаполненным кодом и один без него в vue js в качестве веб-компонента - PullRequest
Новая
       19

Как создать один файл с полизаполненным кодом и один без него в vue js в качестве веб-компонента

1 голос
/ 28 февраля 2020

Я создал приложение Vue в качестве веб-компонента. Создал его используя скрипт 

vue-cli-service build  --target wc  --name email-compose ./src/views/EmailCompose.vue

Я сделал полифилы. Таким образом, мой вывод - javascript файл с переданным кодом. Это полезно для таких браузеров, как IE 11. Но не требуется для современных браузеров, таких как chrome. Есть ли способ сгенерировать один заполненный файл и один без него. 

vue-cli-service build --modern

Этот код был бы полезен, если бы я просто собирал. Поскольку я строю его как веб-компонент, это бесполезно.

поэтому, ребята, пожалуйста, предложите какой-нибудь способ создания одного заполненного файла и одного без него.

Заранее спасибо.

пакет. json

{
  "name": "web-component-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "prebuild": "babel --plugins @babel/plugin-transform-arrow-functions node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js -o node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js",
    "build:production": "vue-cli-service build  --target wc  --name email-compose ./src/views/EmailCompose.vue",
    "build": "npx vue-cli-service build  --target wc --inline-vue --name email-compose-legacy ./src/views/EmailCompose.vue",
    "test": "npm run build && npm run build:prod"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "axios": "^0.19.2",
    "babel-preset-es2015": "^6.24.1",
    "core-js": "^3.6.4",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "vue": "^2.6.11",
    "@vue/web-component-wrapper": "^1.2.0",
    "webcomponentsjs": "^1.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/web-component-wrapper": "^1.2.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-custom-element-classes": "^0.1.0",
    "copy-webpack-plugin": "^5.1.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "browserslist": [
    "ie 11"
  ]
}

babel.config. js

module.exports = {
  presets:  ["@babel/preset-env"], 
    overrides: [
      {
        presets: [
          ["@babel/preset-env", {   targets: { ie: "11" } }],
        ],
      }]
}

webpack.config. js

module.exports = {
    entry: {
        app: ['@babel/polyfill','./src/main.js'],   
    },
    module: {
        test: /\.js$/,
        exclude: file => (
            /node_modules/.test(file)
        ),
        use: [
            { loader: "babel-loader" },
        ],
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    }
}
...