the code below won't work in webpack, can't export the right result.
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
but these code works well:
"function"==typeof define && define.amd
?
define(function() {
return FastClick;
})
:
"undefined"!=typeof module && "undefined"!=typeof module.exports
?
module.exports= FastClick
:
window.FastClick=FastClick
does webpack not read the code in if condition?
and i found that the ; at the begining of the module also causes different result:
;(function () {...} ());
is different with
(function () {...} ());
in webpack ^2.2.1
Related
I understand how to control what the publicPath would be based on process.env.NODE_ENV variable.
My vue.config.js is working as expected, but only for production and non-production environments. How would I control the publicPath variable when I have qa, dev, and stage environments?
Note: I have added my .env.qa, .env.dev, and .env.stage.
vue.config.js:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/ProductionEnv/'
: '',
"transpileDependencies": [
"vuetify"
]
}
I would compute publicPath in vue.config.js like this:
function getPublicPath() {
switch (process.env.NODE_ENV) {
case 'production': return '/ProductionEnv/'
case 'qa': return '/QaEnv/'
case 'dev': return '/DevEnv/'
case 'stage': return '/StageEnv/'
default: return ''
}
}
module.exports = {
publicPath: getPublicPath()
}
If you need conditional behavior based on the environment you can use a function and mutate the values inside, or return an object which will be merged.
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// mutate config for production...
} else {
// mutate for development...
}
}
}
See more here: configureWebpack
How can you make the vue cli service compile code while skipping webpack? I just need it to use babel.
Basically im trying to avoid code like this:
/******/(function (modules) {
// webpackBootstrap
/******/ // The module cache
/******/var installedModules = {};
/******/
/******/ // The require function
/******/function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/if (installedModules[moduleId]) {
/******/return installedModules[moduleId].exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/var module = installedModules[moduleId] = {
/******/i: moduleId,
/******/l: false,
/******/exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/module.l = true;
/******/
/******/ // Return the exports of the module
/******/return module.exports;
Obviously this is just a part but I think you get the idea. So is a clean build possible? The type of output im looking for is:
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = main;
function main(_ref) {
var x = _ref.x,
y = _ref.y,
contextPath = _ref.contextPath,
configuration = _ref.configuration;
var node = document.getElementById(y);
node.innerHTML = "test";
}
Where the source file is:
export default function main({x, contextPath, y, configuration}) {
const node = document.getElementById(y);
node.innerHTML ="test";
}
Transpiled with the following command:
babel --source-maps -d build src
However, im trying to get the same to work with the vue-cli-service but it destroys my code with all the namespacing and dependency requires:
vue-cli-service build --dest build src/index.js
This is my vue.config.js:
module.exports = {
productionSourceMap: false,
filenameHashing: false,
chainWebpack: config => config.optimization.minimize(false),
configureWebpack: {
output: {
filename: "./index.js"
}
},
css: {
extract: {
filename: "./index.css"
}
}
}
You can extract the webpack bootstrap code to another file by setting optimization.runtimeChunk option
...
optimization: {
runtimeChunk: true
}
...
That is the closest thing I can think of that suites your needs.
I 'm trying to share a simple class between vue and express.
The problem is that vue supports es6 import/export default, whereas express(node) only supports the require/module.exports syntax.
Is there a way to use export default statement in nuxt.js backend (express.js), so I can use my class in both ends? Or maybe, add support for module.exports in vue?
Thanks!
You can exlude you file from transpiler.
const Path = require('path')
module.exports = {
build:{
extend({ module: { rules } }) {
const rule = findJsxRule(rules)
rule.exclude = exclude(
[
Path.resolve(__dirname, '../lib'),
Path.resolve(__dirname, '../interface')
],
rule.exclude
)
}
}
}
function findJsxRule(rules) {
return rules.find(rule => {
return rule.test.toString() === '/\\.jsx?$/i'
})
}
function exclude(paths, old) {
return file => {
if (paths.some(path => file.startsWith(path))) {
return true
} else if (old) {
return old(file)
} else {
return false
}
}
}
trying run an aurelia v1.0.1 app in safari gives me a very strange error.
Error: eval#[native code]
promiseReactionJob#[native code]
Evaluating http://localhost:8080/app/src/main.js
Error loading http://localhost:8080/app/src/main.js — system.src.js:5031
I tried adding the aurelia-polyfills but that id not do the trick.
main.js looks like
import "aurelia-polyfills";
export function configure(aurelia) {
return new Promise((resolve) => {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => {
aurelia.setRoot();
resolve();
});
});
}
In chrome and firefox everything is fine.
Any ideas?
ps, the systemjs code that the error refers to is
else if (typeof importScripts !== 'undefined') {
var basePath = '';
try {
throw new Error('_');
} catch (e) {
e.stack.replace(/(?:at|#).*(http.+):[\d]+:[\d]+/, function(m, url) {
$__curScript = { src: url };
basePath = url.replace(/\/[^\/]*$/, '/');
});
}
if (doPolyfill)
importScripts(basePath + 'system-polyfills.js');
bootstrap();
}
else {
$__curScript = typeof __filename != 'undefined' ? { src: __filename } : null;
bootstrap();
}
The second last line "bootstrap()" being the line refered to by the error.enter code here
I installed chrome os and got a better error.
It turns out that the code typescript is generating is es2015 so it was the arrow functions causing the issue.
Transpiling it to es5 solved the problem.
I'm new in typescript. I'm playing with this code:
module app.controllers {
export class BarController {
}
}
module app.controllers {
export class MehController {
}
}
by using tsc with option --module amd and outFile app.js I got this result:
var app;
(function (app) {
var controllers;
(function (controllers) {
var BarController = (function () {
function BarController() {
}
return BarController;
}());
controllers.BarController = BarController;
})(controllers = app.controllers || (app.controllers = {}));
})(app || (app = {}));
var app;
(function (app) {
var controllers;
(function (controllers) {
var MehController = (function () {
function MehController() {
}
return MehController;
}());
controllers.MehController = MehController;
})(controllers = app.controllers || (app.controllers = {}));
})(app || (app = {}));
There are 2 var app; generated. I'm wondering that it should only generated once. Or even better something like this:
var app;
(function (app) {
var controllers;
(function (controllers) {
var BarController = (function () {
function BarController() {
}
return BarController;
}());
controllers.BarController = BarController;
var MehController = (function () {
function MehController() {
}
return MehController;
}());
controllers.MehController = MehController;
})(controllers = app.controllers || (app.controllers = {}));
})(app || (app = {}));
Is that possible? and if it so, then how to achieve it? If it's not, then maybe is there any tool out there to simplify the generated javascript code like that to the result that I expected? Thanks in advanced!
No and it is not needed.
Because of variable hoisting there will be only 1 variable named app at runtime.1
You can find more about hoisting here.
As for the modules being compiled separately you can't change that either.