想一想图书馆目标是否设置为＆＃39; umd＆＃39;输出可以通过<script>标签使用，如果没有可用的模块系统，它将被附加到窗口。然而，这似乎并非如此，或者某处出现了错误......此时需要另外一双眼睛。
package.json是：
{
"name": "scoped-css",
"version": "2.1.9",
"description": "Scoped CSS in two easy steps.",
"main": "lib/index.js",
"author": "Joshua Robinson",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/buildbreakdo/scoped-css.git"
},
"bugs": {
"url": "https://github.com/buildbreakdo/scoped-css/issues"
},
"homepage": "https://github.com/buildbreakdo/scoped-css",
"keywords": [
"react",
"reactive-root",
"scope",
"scoped",
"inline",
"style",
"styles",
"styling",
"css",
"CSS",
"classes",
"classname",
"classnames",
"util",
"utility"
],
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.9.1",
"babel-eslint": "^6.0.4",
"babel-jest": "^12.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"jest-cli": "^12.1.1",
"js-beautify": "^1.6.3",
"rimraf": "^2.5.2",
"uglifyjs": "^2.4.10",
"webpack": "^1.13.1"
},
"scripts": {
"build": "webpack && babel src --out-dir lib && NODE_ENV='production' webpack && babel src --out-dir lib && npm run tests",
"prebuild": "rimraf dist lib",
"prepublish": "npm run build",
"lint": "eslint .",
"tests": "npm run lint && jest --coverage"
},
"dependencies": {}
}
webpack.config.js是：
// => webpage.config.js
var webpack = require('webpack');
var __DEV__ = JSON.parse(process.env.NODE_ENV !== 'production');
module.exports = {
entry: './src/index.js',
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-1']
}
}
]
},
output: {
filename: __DEV__ ? 'dist/scoped-css.js' : 'dist/scoped-css.min.js',
libraryTarget: 'umd',
library: 'scoped-css'
},
plugins: __DEV__ ? [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
] : [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
]
};
但是，当通过<script>标记包含模块并尝试使用代码时会看到：
standalone.html:21 Uncaught ReferenceError: Style is not defined
standalone.html如下：
<!-- standalone.html -->
<html>
<head>
<script src="../dist/scoped-css.js"></script>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<ul>
<li>baz</li>
<li>klutz</li>
</ul>
<script>
var ulElements = document.querySelectorAll('ul');
var firstUlElement = ulElements[0];
firstUlElement.className = Style.scoped();
var firstUlStyle = document.createElement('style');
firstUlStyle.type = 'text/css';
firstUlStyle.innerHTML = Style.CSS( { 'li' : { color: 'red' } } );
document.head.appendChild(firstUlStyle);
var secondUlElement = ulElements[1];
secondUlElement.className = Style.scoped();
var secondUlStyle = document.createElement('style');
secondUlStyle.type = 'text/css';
secondUlStyle.innerHTML = Style.CSS( { 'li' : { backgroundColor: 'khaki' } } );
document.head.appendChild(secondUlStyle);
// See how both styles target all li? They do not impact each other
// because each is scoped--this is called subtree scoping and is natively
// supported in Firefox; native support has not landed in other browsers yet
// so this serves as a poly-like-fill.
</script>
</body>
</html>
以下是../dist/scoped-css.js的顶部和底部（已检查过网络面板，正确加载，无法调用）：
// => dist/scoped-css.js
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["scoped-css"] = factory();
else
root["scoped-css"] = factory();
})(this, function() {
return /******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
...
...
...
if (true) {
// Add support for AMD ( https://github.com/amdjs/amdjs-api/wiki/AMD#defineamd-property- )
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, __webpack_require__(2), __webpack_require__(1)], __WEBPACK_AMD_DEFINE_RESULT__ = function(requireamd) {
var js_beautify = __webpack_require__(2);
var css_beautify = __webpack_require__(1);
return {
html_beautify: function(html_source, options) {
return style_html(html_source, options, js_beautify.js_beautify, css_beautify.css_beautify);
}
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports !== "undefined") {
// Add support for CommonJS. Just put this file somewhere on your require.paths
// and you will be able to `var html_beautify = require("beautify").html_beautify`.
var js_beautify = require('./beautify.js');
var css_beautify = require('./beautify-css.js');
exports.html_beautify = function(html_source, options) {
return style_html(html_source, options, js_beautify.js_beautify, css_beautify.css_beautify);
};
} else if (typeof window !== "undefined") {
// If we're running a web page and don't have either of the above, add our one global
window.html_beautify = function(html_source, options) {
return style_html(html_source, options, window.js_beautify, window.css_beautify);
};
} else if (typeof global !== "undefined") {
// If we don't even have window, try global.
global.html_beautify = function(html_source, options) {
return style_html(html_source, options, global.js_beautify, global.css_beautify);
};
}
}());
/***/ }
/******/ ])
});
;
怀疑是它与src/index.js（在构建到dist/scoped-css.js之前的原始文件）中处理导出的方式有关。
src/index.js的底部（在构建之前）看起来像：
// Index.js
...
...
...
var Style = {
scoped: scoped,
CSS: CSS
};
module.exports = Style;
同样，期望是如果包含脚本标记中的../dist/scoped-css.js，则scoped-css.js可以被调用为Style.CSS({})或Style.scoped()（附加到窗口）。
此外，使用jest进行测试和模块加载并且可以调用很好，所以知道代码没有被破坏。 webpack配置有什么用呢？
我可能有些愚蠢，只需要另一双眼睛，盯着这个太久了！感谢您的时间和专业知识。
答案 0 :(得分：2)
问题在于，由于scoped-css行，您的UMD构建输出使用library: 'scoped-css'全局。如果您将其更改为library: 'Style'，则代码将按预期运行。