1
ライブラリターゲットが 'umd'に設定されていて、<script>タグを介して出力が使用可能であり、使用可能なモジュールシステムがない場合は、ウィンドウにアタッチされます。しかし、これはそうではないようであるか、間違いがどこかで作られています。この時点で別のペアの目が必要です。スクリプト要素からwebpackを使用してスタンドアロンモジュールを作成する方法は？
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は次のとおりです。
：しかし<script>タグを経由して、モジュールを含む、コードを見て使用しようとすると
// => 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
}
})
]
};
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の設定で何かが起きていますか？
私の側で何か愚かかもしれませんが、ちょうど別の目が必要です、これをあまりにも長く注視しています！あなたの時間と専門知識に感謝します。
'library： 'scoped-css''の代わりに' library：' Style''を設定しようとしましたか？ –
あなたは、この巨大なコードのダンプの中で、その1つの行を捕らえるために、男の中の神です。 100％正解、私はあなたの信用を与えることができるように答えとして投稿してください。とてもありがとう@ビブロー！ –
完了。ありがとう。 :) –