【发布时间】:2020-01-21 15:14:56
【问题描述】:
我有这个设置来将带有 rollup + babel 的 ES6 模块转换为浏览器目标。我尝试了很多东西(atm 是“ie10”),但转译后的 JS 仍然包含 const 而不是 var。
我也有一个单独的.babelrc 文件,但它没有改变任何东西。
我做错了什么?
更新:
似乎只有来自 'uikit-util' 的代码没有被转译。我可以添加它的路径并保留它:exclude: 'node_modules/**' 吗?
rollup.config.js
import "core-js";
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
const alias = require('rollup-plugin-import-alias');
import path from 'path';
const production = !process.env.ROLLUP_WATCH;
export default {
input: './src/js/index.js',
output: {
file: 'dist/js/build.js',
format: 'iife',
sourcemap: false
},
plugins: [
resolve(),
!production && serve({
open: true,
contentBase: '',
openPage: '/mysite',
host: 'localhost',
port: 80,
}),
!production && livereload({
watch: [
path.resolve(__dirname, 'my/js/')
],
}),
babel({
exclude: 'node_modules/**',
extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
presets: [
[
'@babel/preset-env',
{
targets: {
"ie": "10",
},
}
]
]
}),
alias({
Paths: {
'uikit-util': './node_modules/uikit/src/js/util/index',
},
Extensions: ['js', 'json']
}),
commonjs(),
// production && terser()
],
};
package.json
{
"name": "My Build",
"version": "0.1.0",
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-external-helpers": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.8.3",
"@babel/register": "^7.8.3",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"browser-sync": "^2.26.3",
"cross-spawn": "^6.0.5",
"cssnano": "^4.1.7",
"del": "^3.0.0",
"glob": "^7.1.6",
"less": "^3.10.3",
"merge-stream": "^1.0.1",
"npm-run-all": "^4.1.5",
"rollup": "1.27.9",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-browsersync": "^1.1.0",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-import-alias": "^1.0.10",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-less": "^1.1.2",
"rollup-plugin-livereload": "^1.0.4",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.2",
"run-sequence": "^2.2.1",
"serve": "^11.2.0",
"yargs": "^12.0.5"
},
"description": "My Desc",
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"dev": "npm-run-all --parallel start watch",
"start": "serve ."
},
"author": "Me",
"dependencies": {
"@babel/polyfill": "^7.7.0",
"@tarekraafat/autocomplete.js": "^7.2.0",
"core-js": "3",
"flatpickr": "^4.6.3",
"gulp-less": "^4.0.1",
"leaflet": "^1.6.0",
"leaflet.markercluster": "^1.4.1",
"streamqueue": "^1.1.2",
"uikit": "^3.2.4"
}
}
index.js
import { $, $$, on, data, ajax, attr, addClass, removeClass } from 'uikit-util';
import { func1, func2, func3} from '../util/index';
export function ABC() {
...
}
【问题讨论】:
-
我通过将
from 'uikit-util';更改为from './uikit-util';解决了这个问题。我想让它变得新鲜,但这至少有效。
标签: javascript node.js babeljs rollup transpiler