모듈 가 져 오기 내 보 내기
도 출
ES6
//
export var Count = 5;
export function Multiply(a, b) {
return a * b;
}
//
export default {
// Some data...
};
//
export * from './src/echarts';
export { default as IhrMore } from '@/components/common/more/more.vue'CommonJS
module.exports = function (source, map) {
this.callback(
null,
`export default function (Component) {
Component.options.__docs = ${
JSON.stringify(source)
}
}`,
map
)
}AMD
define([name: String], [dependencies: String[]], factoryMethod: function(...))
define(value: !Function)웹 팩 에 내 장 된 LabeledModulesPlugin 플러그 인 특수 내 보 내기 가 져 오기
export: var answer = 42;
export: function method(value) {
// ……
};// some-dependency.js export
export: var answer = 42;
export: function method(value) {
// ……
};
// require:
require: 'some-dependency';
console.log(answer);
method(...);동기 화 가 져 오기
ES6
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';CommonJS
var myModule = require('my-module'); require.resolve('dependency') 컴 파일 러 (copiler) 가 의존 항목 이 최종 출력 bundle 에서 사용 할 수 있 도록 합 니 다.(모듈 ID 로 되 돌 아 왔 지만 실제로 가리 키 는 모듈 은 현재 모듈 에 불 러 왔 습 니 다)require.cache[require.resolve('dependency')]; delete require.cache[require.resolve('dependency')]; Webpack
//
require.context(
directory: String, //
includeSubdirs: Boolean // /* ， true */,
filter: RegExp // /* */
)
//
import BaseButton from './components/BaseButton.vue'
import BaseIcon from './components/BaseIcon.vue'
import BaseInput from './components/BaseInput.vue'
//
const requireComponent = require.context(
'./components', //
false, //
/Base[A-Z]\w+\.(vue|js)$/ //
)
// require.context requireComponent(fileName)
// ， ，
// require.contex resolve export default export（resolve ？）
requireComponent.keys().forEach(fileName => { // keys ， ， （ ）
const componentConfig = requireComponent(fileName) //
// PascalCase
const componentName = upperFirst( // lodash ，
camelCase( // lodash ，
// `./`
fileName.replace(/^\.\/(.*)\.\w+$/, '$1') // ./ .[a-zA-Z_] ，'$1' replace ： ，'$1' 1
)
)
//
Vue.component(
componentName,
// `export default` ，
// `.default`，
// 。
componentConfig.default || componentConfig
)
})
// require.context ， resolve id，
var context = require.context('components', true, /\.html$/);
var componentA = context.resolve('componentA');if(__webpack_modules__[require.resolveWeak('module')]) {
// ， ……
}
if(require.cache[require.resolveWeak('module')]) {
// ， ……
}
// require/import ，
// （“ ”）。
const page = 'Foo';
__webpack_modules__[require.resolveWeak(`./page/${page}`)];비동기 가 져 오기
ES6
./locales/${language}.json 는 여러 개의 요청 한 모듈 경 로 를 포함 할 수 있 습 니 다.) ./locale/${language} 최소한 파일 의 경로 정보 가 필요 합 니 다. 웹 팩 을 포장 할 때 모든. / locale / 를 하나의 chunk 아래 에 포장 합 니 다 //
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
'module'
);
//
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
`./locale/${language}`
);CommonJS
require.ensure(
dependencies: String[], // ， callback 。
// ，webpack 。
// require ， 。 ， require() 。 ， require() 。 require webpack
callback: function(require),
errorCallback: function(error),
chunkName: String // chunk 。 chunkName require.ensure() ， chunk ， bundle。
)AMD
require(dependencies: String[], [callback: function(...)]) Webpack
equire.include('a');
require.ensure(['a', 'b'], function(require) { /* ... */ });
require.ensure(['a', 'c'], function(require) { /* ... */ });
// :
// entry chunk: file.js and a
// anonymous chunk: b
// anonymous chunk: c
// require.include('a')， chunk a。CSS 모듈 화 가 져 오기 사용 방법
다음으로 전송:https://www.cnblogs.com/qq3279338858/p/9875995.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
