当您require以Commonjs形式(require(’modX’))而不是AMD形式(require([’modX’], function(modX) {...}))进行调用时,您所描述的错误正是RequireJS给您的, 调用没有被封装进来define。RequireJS为使用Commonjs表单提供了一些支持,但是开发人员必须做最少的工作才能确保它能正常工作。以此开头的脚本将不起作用:
var modX = require(’modX’);// rest of the module
您收到错误消息。您需要此:
define(function (require) { var modX = require(’modX’); // rest of the module});
设置的实际情况是,Babel正在将ES6模块转换为require无需define包装即可使用的模块。为了使Babel输出正确的AMD模块,您需要安装babel-plugin-transform-es2015-modules-amd并添加transform-es2015-modules-amd到Babel插件列表中。请参阅此处的文档。
解决方法我正在尝试建立反应的单元测试框架。这样做时,发生以下错误。我搜索了整个互联网,但没有有效的解决方案。下面是显示的错误和我正在使用的代码/软件包。
调试错误
04 03 2016 04:48:46.340:DEBUG [phantomjs.launcher]: Error: Module name 'react' has not been loaded yet for context: _. Use require([])http://requirejs.org/docs/errors.html#notloaded04 03 2016 04:48:46.341:DEBUG [phantomjs.launcher]: http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:140 in defaultOnError http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:544 in onError http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1429 in localRequire http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1791 in requirejsPhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR Error: Module name 'react' has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded at /Users/lebeier/Documents/iMARS/node_modules/requirejs/require.js:140PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.053 secs / 0 secs)
节点包
'dependencies': { 'bootstrap': '^3.3.6','highcharts': '^4.2.1','history': '^1.17.0','jquery': '^2.2.0','js-cookie': '^2.1.0','react': '^0.14.6','react-bootstrap': '^0.28.2','react-bootstrap-table': '^1.4.5','react-data-components': '^0.6.0','react-dom': '^0.14.6','react-highcharts': '^6.0.0','react-notification-system': '^0.2.6','react-router': '^1.0.3','reactify': '^1.1.1','toastr': '^2.1.2' },'devDependencies': { 'babel-core': '^6.6.4','babel-loader': '^6.2.4','babel-preset-es2015': '^6.3.13','babel-preset-react': '^6.3.13','babel-preset-stage-0': '^6.5.0','babelify': '^7.2.0','browserify': '^13.0.0','core-js': '^2.1.3','grunt-template-jasmine-requirejs': '^0.2.3','jasmine': '^2.4.1','karma': '^0.13.21','karma-babel-preprocessor': '^6.0.1','karma-browserify': '^5.0.2','karma-cli': '^0.1.2','karma-coverage': '^0.5.4','karma-jasmine': '^0.3.7','karma-phantomjs-launcher': '^1.0.0','karma-requirejs': '^0.2.5','karma-webpack': '^1.7.0','node-sass': '^3.4.2','phantomjs-prebuilt': '^2.1.4','requirejs': '^2.1.22','uglify': '^0.1.5','watchify': '^3.7.0','webpack': '^1.12.14' }
karma.conf.js
module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files,exclude) basePath: ’’,// frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: [’jasmine’,’requirejs’],// list of files / patterns to load in the browser files: [ ’tests/*.js’ //{ pattern: ’tests.webpack.js’,watched: false },],// list of files to exclude //exclude: [ // ’./node_modules/’ //],plugins: [ ’karma-jasmine’,’karma-requirejs’,’karma-phantomjs-launcher’,’karma-babel-preprocessor’,’karma-coverage’,’karma-browserify’,’karma-webpack’ ],// preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { ’core/static/core/js/*.js’ : [’babel’],’tests/*.js’ : [’babel’],’tests.webpack.js’: [ ’webpack’] },babelPreprocessor:{ options: {presets: [’es2015’,’react’],plugins: ['transform-object-rest-spread'],sourceMap: ’inline’ },filename: function(file){return file.originalPath.replace(/.js$/,’.es5.js’); },sourceFileName: function(file){return file.originalPath; } },// test results reporter to use // possible values: ’dots’,’progress’ // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: [’dots’],// web server port port: 9876,// enable / disable colors in the output (reporters and logs) colors: true,// level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_DEBUG,// enable / disable watching file and executing tests whenever any file changes autoWatch: true,// start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: [’PhantomJS’],// Continuous Integration mode // if true,Karma captures browsers,runs the tests and exits singleRun: true,// Concurrency level // how many browser should be started simultaneous concurrency: Infinity,webpack: { devtool: ’inline-source-map’,modules: {loaders: [ {test: /.js$/,exclude: /node_modules/,loader: ’babel-loader’,query:{ presets: [’es2015’,’react’]} }],},watch: true,webpackServer: { noInfo: true,} })}
测试/ test.js
import React from ’react’;import ReactDOM from ’react-dom’;describe(’Testing’,()=>{ it(’sample test’,()=>{var v = 2;var parts = [’shoulders’,’knees’];var lyrics = [’head’,...parts,’and’,’toes’];expect(v).toEqual(2); }); });
非常感谢您的帮助!